使用 jquery 切换图像答案

【问题标题】：Switchout images with jquery使用 jquery 切换图像
【发布时间】：2018-07-20 14:27:47
【问题描述】：

我有多个图像，每个图像都有一个按钮。现在我想通过点击相应的按钮在图像之间切换。

所以当我单击带有value X 的按钮时，所有图像都会隐藏，除了带有id X 的图像

<div class="variantImage" id="831">
  <img src="yy.jpg">
</div>
<div class="variantImage" id="1556">
  <img src="xx.jpg">
</div>

<button type="button" class="variantBtn" name="button" value="831">
  Format F4
</button>
<button type="button" class="variantBtn" name="button" value="1556">
  Format A1
</button>

这几乎可以工作：

$(".variantBtn").click(function(){
  var firedBtn = $(this).val();
  console.log(firedBtn)
  if(firedBtn){
    $("#" + firedBtn).css("display", "block");
  } else {
    $(".variantImage").not("#" + firedBtn).css("display", "hide");
      }
}).change();

第一次点击会显示相应的图像。但在下一次点击时没有更多的事情发生。我想我很接近。但是我如何隐藏除了相应的ID之外的每个ID？ https://codepen.io/Sepp/pen/wxgvmo

【问题讨论】：

标签： jquery button show-hide

【解决方案1】：

firedBtn 在您的代码中将始终被认为是正确的，您只是在显示一个新的而不是隐藏其他的，这应该是一种解决方案：

$(".variantBtn").click(function(){
   var firedBtn = $(this).val(); // console.log(firedBtn); //value of the btn
   $(".variantImage").hide(); //hide all image by class
   $("#" + firedBtn).show(); // show the image by id
});

【讨论】：