活動按鈕替換當前活動按鈕內的 img-src 並在不活動時反轉 src

Question

我有 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";

提前致謝！！

Answer 1

你可以這樣做（我評論了代碼）。

 $('.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>

Answer 2

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