Блог

Главная - Вопросы по программированию - Как изменить цвет элемента div в зависимости от цвета блока с помощью JavaScript?

Как изменить цвет элемента div в зависимости от цвета блока с помощью JavaScript?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть 2 блока на выбор пользователя, и они должны быть интерактивными. Блок меняет цвет, а цвет вертикальной линии должен быть изменен на противоположный. Интересно, смогу ли я сделать это правильно в том же фрагменте кода, который изменяет цвет блока кода, потому что ранее я это делал, но с другим циклом for, и это не самый быстрый способ.

 let vanOption = document.getElementsByClassName("van-quote-option");
let quoteVl = document.getElementById("option-vl");

// Van option selection

for (var x = 0; x < vanOption.length; x  ) {
  vanOption[x].addEventListener("click", function() {
  var currentOption = document.getElementsByClassName("option-active");
  if (currentOption.length > 0) { 
    currentOption[0].className = currentOption[0].className.replace(" option-active", "");
  }  
  this.className  = " option-active";
  });
} 
 .van-quote-option {
    display: flex;
    justify-content: space-evenly;
    margin: 25px 165px 20px 165px;
    border: 1px solid grey;
    cursor: pointer;
    transition: 0.5s;
}

.option-active {
    background-color: #18A063;
    color: #fff;
}

.quote-vl {
    border-left: 2px solid #13985C;
    height: 116px;
}

.quote-vl-active {
    border-left: 2px solid #fff;
    height: 116px;
}

.quote-icon {
    margin: 25px 0 0 35px;
}

.quote-van-icon {
    font-size: 49px;
    padding: 8px;
    border-radius: 50%;
    height: 60px;
    background-color: rgb(245, 245, 245);
    color: #18A063;
}

.quote-car-icon {
    font-size: 49px;
    padding: 9px;
    height: 52px;
    background-color: rgb(245, 245, 245);
    color: #18A063;
    border-radius: 50%;
}

.quote-bicycle-icon {
    font-size: 49px;
    padding: 10px;
    height: 55px;
    background-color: rgb(245, 245, 245);
    color: #18A063;
    border-radius: 50%;
}

.quote-p {
    text-align: left;
}

.quote-p-van {
    text-align: left;
    margin-top: 5px;
}

.bicycle-quote-vl,
.car-quote-vl {
    height: 124px;
}

.quote-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote-price-van {
    margin-top: 10px;
}

.van-send-price,
.car-send-price,
.bicycle-send-price {
    font-size: 25px;
    font-weight: 700;
}

.van-send-price::before,
.car-send-price::before,
.bicycle-send-price::before {
    content: "0A3";
} 
 <div class="quote-options">
        <div class="van-quote-option option-active">
          <div class="quote-icon quote-icon-1">
            <i class="fas fa-truck quote-van-icon"></i>
          </div>
          <div class="quote-p-van">
            <div class="quote-p-1">Sending 1 or 2 items (with van)</div>
            <br />
            <div class="quote-p-2">
              We'll take a maximum of 2 items for you<br />
              to deliver immediately at any location.
            </div>
          </div>
          <div class="quote-vl quote-vl-active"></div>
          <div class="quote-price-van">
            <span class="van-send-price" id="van-deliver-price">14</span><br />
            For a max.<br />
            of 2 items.
          </div>
        </div>
        <div class="van-quote-option">
          <div class="quote-icon quote-icon-1">
            <i class="fas fa-truck quote-van-icon"></i>
          </div>
          <div class="quote-p-van">
            <div class="quote-p-1">Hire a van</div>
            <br />
            <div class="quote-p-2">
              We'll take a maximum of 2 items for you<br />
              to deliver immediately at any location.
            </div>
          </div>
          <div class="quote-vl"></div>
          <div class="quote-price-van">
            <span class="van-send-price" id="van-deliver-price">38</span><br />
            Hire a van,<br />
            amp;#8734; items
          </div>
        </div>
      </div>

Ответ №1:

Вы можете исправить это с помощью css.
На самом деле вам не нужен quote-vl-active класс. Удалите его.
Вы можете ссылаться на вертикальную линию, когда она активна, используя option-active , поскольку она является дочерним элементом этого элемента.

 .option-active > .quote-vl {
  border-left: 2px solid white;
    height: 116px;
}

Посмотрите на эту скрипку: https://jsfiddle.net/29r1v0Lo /

Ответ №2:

возможно, вы также захотите использовать onclick против добавления слушателей.

Вот jsfiddle этого, немного более чистый, и с вертушкой, имеющей противоположный цвет: https://jsfiddle.net/7L0uzkxj /

Вы можете просто использовать CSS для управления панелью управления:

 .quote-vl {
    border-left: 2px solid green;
    height: 116px;
}
.option-active .quote-vl {
    border-left: 2px solid white;
    height: 116px;
}

Затем вы можете очистить JS, чтобы он выглядел так:

 function triggerMe(evt) {
  let vanOption = document.getElementsByClassName("van-quote-option");
  [...vanOption].forEach(x => {
    if (x.classList.contains('option-active')) {
      x.classList.remove('option-active');
    }
  })
  evt.classList.toggle('option-active');
}