Замена фонового изображения

221
26 ноября 2016, 17:59

есть див

<div class="field field-name-field-season field-type-list-text field-label-inline clearfix">
    <div class="field-label">Сезонность:&nbsp;</div>
    <div class="field-items">
        <div class="field-item even">Весь год</div>
    </div>
</div>

Нужно - сделать проверку содержимого

<div class="field-item even">Весь год</div>

и в зависимости от того, что там - весь год, зима или лето, сменить фоновое изображение у

<div class="field-label">Сезонность:&nbsp;</div>

хороший человек подсказал вот такое

  var elemForImageChange = document.getElementsByClassName("field-item");
  for(el in elemForImageChange){
   if(elemForImageChange.hasOwnProperty(el)){
    switch(elemForImageChange[el].innerHTML) {
     case 'Весь год': elemForImageChange[el].style.background = 'rgba(0, 0, 0, 0) url("/sites/default/themes/raft/images/summer.png") no-repeat scroll 100% 100% / contain ';
     break;
          case 'Лето': elemForImageChange[el].style.background = 'rgba(0, 0, 0, 0) url("/sites/default/themes/raft/images/summer.png") no-repeat scroll 100% 100% / contain ';
     break;
          case 'Зима': elemForImageChange[el].style.background = 'rgba(0, 0, 0, 0) url("/sites/default/themes/raft/images/winter.png") no-repeat scroll 100% 100% / contain ';
     break;
   }
  }
  }

но тут есть загвоздка - оно проверяет и меняет фоновый рисунок у field-items, а должно только проверять, а менять у field-label

Пробовал менять, но, видимо, я еще не дошел до уровня, чтобы хорошо понимать логику данного кода(

  var elemForImageChange = document.getElementsByClassName("field-item");
  var elemForImageChangeLB = document.getElementsByClassName("field-label");
   for(el in elemForImageChange){
   if(elemForImageChange.hasOwnProperty(el)){
    switch(elemForImageChangeLB[el].innerHTML)
    {
     case 'Весь год': elemForImageChangeLB[el].style.background = 'rgba(0, 0, 0, 0) url("/sites/default/themes/raft/images/summer.png") no-repeat scroll 100% 100% / contain ';
     break;
          case 'Лето': elemForImageChangeLB[el].style.background = 'rgba(0, 0, 0, 0) url("/sites/default/themes/raft/images/summer.png") no-repeat scroll 100% 100% / contain ';
     break;
          case 'Зима': elemForImageChangeLB[el].style.background = 'rgba(0, 0, 0, 0) url("/sites/default/themes/raft/images/summer.png") no-repeat scroll 100% 100% / contain ';
     break;
   }
  }
  }
Answer 1

Используйте parentNode и previousElementSibling для перемещения по DOM относительно найденного элемента в данном случае:

var elemForImageChange = document.getElementsByClassName("field-item"); 
for (el in elemForImageChange) { 
  if (elemForImageChange.hasOwnProperty(el)) { 
    switch (elemForImageChange[el].innerHTML) { 
      case 'Весь год': 
        elemForImageChange[el].parentNode.previousElementSibling.style.background = 'rgba(0, 0, 0, 0) url("https://lh4.googleusercontent.com/-6Vvt5okqyYA/AAAAAAAAAAI/AAAAAAAAAzs/xrQt4JERVaU/photo.jpg?sz=32") no-repeat scroll 100% 100% / contain '; 
        break; 
 
    } 
  } 
}
<div class="field field-name-field-season field-type-list-text field-label-inline clearfix"> 
  <div class="field-label">Сезонность:&nbsp;</div> 
  <div class="field-items"> 
    <div class="field-item even">Весь год</div> 
  </div> 
</div>

READ ALSO
Проверка на существование div js

Проверка на существование div js

Как проверить правильно на существование дива?

349
Зачем здесь использовать call?

Зачем здесь использовать call?

Когда вызвать эту функцию без call, то она выведет undefined undefinedНо почему? Если я передал ей аргумент user, и ее this становится user

180