使用 jquery 切换图像

Question

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

因此，当我单击带 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

Answer 1

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

$(".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
});

使用 jquery 切换图像

Switchout images with jquery

jquery

button

show-hide