活动按钮替换当前活动按钮中的img src，并在不活动时反转src

5cg8jx4n 于 2021-07-07 发布在 Java

关注(0)|答案(2)|浏览(374)

我有8个活动的按钮，我想改变img src对当前活动的按钮，并扭转src时，它不活跃了。我不擅长js，我想不出来。
所有非活动图像的结尾都是“\u grey.png”，活动图像的结尾应该是“\u 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";

提前谢谢！！

Java jquery JavaScript Html Button

来源：https://stackoverflow.com/questions/65114368/active-buttons-replacing-img-src-inside-currently-active-button-and-reverse-src

2条答案

按热度按时间

h4cxqtbf1#

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

赞(0）回复(0）举报 2021-07-07

3pmvbmvn2#

你可以这样做（我注解了代码）。

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

赞(0）回复(0）举报 2021-07-07

我来回答

活动按钮替换当前活动按钮中的img src，并在不活动时反转src

2条答案

相关问题

热门标签

最新问答