通过jQuery单击隐藏/显示许多元素

Question

我已经编写了几行jQuery来隐藏/显示单击的许多元素,它正在工作.但问题是; 我有更多的图像类项目,所以我的脚本会很长,我的问题是如何简化或缩短我的脚本,我的意思是任何替代或任何新的想法？请建议.

HTML:

<div id="choose-color">
<span>
 <i class="images-red" style="">Red Image</i>
  <i class="images-blue" style="display: none;">Blue Image</i>
   <i class="images-pink" style="display: none;">Pink Image</i>
 <!-- many many images -->
</span>

 <button class="red">Red</button>
  <button class="blue">Blue</button>
   <button class="pink">Pink</button>

</div>

JS: 现场演示 >

$("button.red").click(function(){
    $(".images-red").show();
    $(".images-blue, .images-pink").hide();
});
$("button.blue").click(function(){
    $(".images-red, .images-pink").hide();
    $(".images-blue").show();
});
$("button.pink").click(function(){
    $(".images-red, .images-blue").hide();
    $(".images-pink").show();
});

请建议我的脚本的简短代码.谢谢.

Answer 1

你可以通过添加class这些按钮的公共,

var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
    iTags.hide().eq($(this).index("button.button")).show();
});

代码背后的概念是使用公共类绑定按钮的click事件.现在在事件处理程序中,隐藏i已经缓存的所有元素,并显示与单击按钮具有相同索引的元素.

DEMO

有关详细信息:.eq()和.index(selector)

如果你的元素顺序不一样,那么i和按钮都是一样的.然后你可以使用datasetjavascript 的功能来解决这个问题.

var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
    iTags.hide().filter(".images-" + this.dataset.class).show()
});

为了实现这一点,你必须为你的按钮添加数据属性,如,

<button data-class="red" class="button red">Red</button>

DEMO