have a div

<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>

Needed - do a content check

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

and depending on what is there all year, winter or summer, change the background image of the

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

a good man suggested this

  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; } } }

but there is a snag - it checks and changes the background image of field-items, but should only check, and change at field-label

I tried to change, but, apparently, I have not yet reached the level in order to understand the logic of this code (

  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; } } }
  • The code checks the field-item elements, but cannot change it, since the field-item div is not the parent of the field-label. and you need to check from the main diva, from "field-name-field-field-field-field-list-text-label-inline clearfix" - Igor Fostyak

1 answer 1

Use parentNode and previousElementSibling to navigate the DOM relative to the found item in this case:

 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>

  • Thank you very much! For the decision and for the links! - Igor Fostyak