Блог

У меня 8 активных кнопок, и я хочу изменить img-src на текущей активной кнопке и отменить src, когда он больше не активен. Я плохо разбираюсь в JS и не могу в этом разобраться.

Все неактивные изображения имеют окончание «_grey.png», а активные должны быть «_blue.png».

HTML:

 <div id="worldfilter">
    <button class="wf-btn active"><img src="world_blue.png"> Welt </button>
    <button class="wf-btn"><img src="europe_grey.png"></button>
    <button class="wf-btn"><img src="north_america_grey.png"></button>
    <button class="wf-btn"><img src="south_america_grey.png"></button>
    <button class="wf-btn"><img src="africa_grey.png"></button>
    <button class="wf-btn"><img src="orient_grey.png"></button>
    <button class="wf-btn"><img src="asia_grey.png"></button>
    <button class="wf-btn"><img src="oceania_grey.png"></button>
  </div>
 

js:

 //Worldfilter button
// Get the container element
var btnContainer = document.getElementById("worldfilter");

// Get all buttons with class="wf-btn" inside the container
var btns = btnContainer.getElementsByClassName("wf-btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i  ) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className  = " active";
 

Заранее спасибо!!

Вы можете сделать так (я прокомментировал код).

 $('.wf-btn').click(function() {
  $('.wf-btn').removeClass('active');  // we remove class for all btn
  $(this).addClass('active');  // we add class to the current btn
  
  // we set all img src btn with _blue.png to _grey.png
  $('.wf-btn').each(function() { 
    var SRCLoop = $(this).find('img').attr('src');
    
    if (SRCLoop.substr(SRCLoop.length-9) == '_blue.png') {
     var newSRCLoop = SRCLoop.replace('_blue.png','');
     $(this).find('img').attr('src', newSRCLoop   '_grey.png');
    }
  });

  var btnSRC = $(this).find('img').attr('src'); // we get the src of the current img btn
  
  // we change src img btn
  if (btnSRC.substr(btnSRC.length-9) != '_blue.png') {
   var newSRC = btnSRC.replace('_grey.png','');
   $(this).find('img').attr('src', newSRC   '_blue.png'); 
  } else {
   var newSRC = btnSRC.replace('_blue.png','');
   $(this).find('img').attr('src', newSRC   '_grey.png');   
  }
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="worldfilter">
    <button class="wf-btn active"><img src="world_blue.png"> Welt </button>
    <button class="wf-btn"><img src="europe_grey.png"></button>
    <button class="wf-btn"><img src="north_america_grey.png"></button>
    <button class="wf-btn"><img src="south_america_grey.png"></button>
    <button class="wf-btn"><img src="africa_grey.png"></button>
    <button class="wf-btn"><img src="orient_grey.png"></button>
    <button class="wf-btn"><img src="asia_grey.png"></button>
    <button class="wf-btn"><img src="oceania_grey.png"></button>
  </div> 

 <div id="worldfilter">
    <button onclick="make_active(this);" class="wf-btn active"><img src="img/blue.png"> Welt </button>
    <button onclick="make_active(this);" class="wf-btn"><img src="img/grey.png"></button>
    <button onclick="make_active(this);" class="wf-btn"><img src="img/grey.png"></button>
    <button onclick="make_active(this);"class="wf-btn"><img src="img/grey.png"></button>
    <button onclick="make_active(this);"class="wf-btn"><img src="img/grey.png"></button>
    <button onclick="make_active(this);"class="wf-btn"><img src="img/grey.png"></button>
    <button onclick="make_active(this);"class="wf-btn"><img src="img/grey.png"></button>
    <button onclick="make_active(this);" class="wf-btn"><img src="img/grey.png"></button>
  </div>
<style>
    img{
        max-width:50px;
    }
</style>
<script>
function make_active(btn){
    for(var i=0;i<document.getElementsByClassName("wf-btn").length;i  ){
        document.getElementsByClassName("wf-btn")[i].children[0].setAttribute("src","img/grey.png");
        
    }
    btn.children[0].setAttribute("src","img/blue.png");
    
}
</script>