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: live demo >

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

请为我的脚本提供简短且简单的代码建议。谢谢。

- Aariba

Answer 1

你可以通过将普通的 class 添加到这些按钮上来实现。

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

代码背后的概念是通过使用普通类为按钮绑定单击事件。现在，在事件处理程序内，隐藏所有已缓存的 i 元素，并显示与单击按钮具有相同索引的元素。

演示

要了解更多详细信息，请参阅：.eq() 和 .index(selector) 如果您的元素顺序不同，包括 i 和按钮的顺序。那么，您可以使用javascript的dataset功能来解决此问题。

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

- Rajaprabhu Aravindasamy

---

可以运行，eq是什么？有使用文档吗？ - Aariba

@Aariba 实际上，eq可以帮助你以索引方式访问元素集合，就像数组一样。我在答案中附上了文档，请查看一下。 - Rajaprabhu Aravindasamy

Answer 2

这个有效

  $("#choose-color button").click(function(){
        var _class = $(this).attr('class');
        $("#choose-color i").hide();
        $(".images-"+_class).show();
    });

https://jsfiddle.net/455k1hhh/5/

- François Dupont

Answer 3

我知道这可能不是最美观的解决方案，但它应该能胜任工作。

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

- Mike B

Answer 4

这种方式依赖于类名，会使未来的可扩展性变得有些困难，但这可以解决您目前的需求：

<div id="myImages">
  <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 image -->
</div>
<div id="myButtons">
  <button class="red">Red</button>
  <button class="blue">Blue</button>
  <button class="pink">Pink</button>
</div>

$("#myButtons button").click(function(){
        var color = $(this).attr("class");
    var imageClass = ".images-"+color;
    $('#myImages').children("i").each(function () {
        $(this).hide();
    });
    $(imageClass).show();
});

这里有一个JSFiddle。

编辑：请注意，我将按钮和图片包装在父级

中，以便您可以仅隔离您想要处理的按钮/图片。

- Elliott

Answer 5

你可以使用data-*属性来实现以下操作，因为当你有多个相同颜色的元素时，使用按钮的索引将不起作用。如果以后必须向按钮添加更多类，则仅使用整个class属性也不起作用。

$("button").click(function() {
  var color = $(this).data('color');
  var targets = $('.images-' + color);
  targets.show();
  $("span i").not(targets).hide();
});

.hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<br/>
<div id="choose-color">
  <span>
<i class="images-red">Red Image</i>
<i class="images-blue hidden">Blue Image</i>
<i class="images-pink hidden">Pink Image</i>
<!-- Many many image -->
</span>
  <br/>
  <br/>
  <button data-color="red">Red</button>
  <button data-color="blue">Blue</button>
  <button data-color="pink">Pink</button>

</div>

- T J

Answer 6

有一个想法是将所有图片归为一类（例如.image）。然后，您只需使用共享类来处理按钮和图像；在此示例中，我使用了颜色名称。现在，当单击任何按钮时，您可以获取要显示的图像的类名。

试试这个方法：

$("button").click(function(){
    $(".image").hide();
    var className = $(this).attr("class");
    $("." + className).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
<div id="choose-color">
<span>
<i class="image red" style="">Red Image</i>
<i class="image blue" style="display: none;">Blue Image</i>
<i class="image pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</span>
<br/><br/>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>

</div>

- Matt Dalzell

Answer 7

你可以尝试这个：

<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 image -->
</span>
<br/><br/>
<button class="colour red" onclick="myFunction(this)">Red</button>
<button class="colour blue" onclick="myFunction(this)">Blue</button>
<button class="colour pink" onclick="myFunction(this)">Pink</button>

</div>

JS: 看这里

$(".colour").click(function(){
    var colors = ["red", "blue", "pink"];
    for (i = 0; i < colors.length; i++) {
        if($(this).hasClass(colors[i])){
            $(".images-"+colors[i]).show();
        }else{
            $(".images-"+colors[i]).hide();
        }
    }
});

- Fernando Madriaga