Question

如何缩短此代码？每个css选择器增加+1。除非选择.mug（x），否则所有Bio的div都是隐藏的。

由于

        <script type='text/javascript'>
                $(document).ready(function () {
                    $(".mug1").click(function() {
                        $("#bios div").hide();
                        $(".bio1").show();                      
                    });                     
                    $(".mug2").click(function() {
                        $("#bios div").hide();
                        $(".bio2").show();                      
                    });                     
                    $(".mug3").click(function() {
                        $("#bios div").hide();
                        $(".bio3").show();                      
                    });                     

            });
        </script>   

        <h2>Meet the team</h2>

        <div id="mugshots">
            <img src="images/img-mugshot.jpg" alt="mug" class="mug1"/>
            <img src="images/img-mugshot.jpg" alt="mug" class="mug2"/>
            <img src="images/img-mugshot.jpg" alt="mug" class="mug3"/>
        </div>

        <div id="bios">
            <div class="bio1"></div>
                            <div class="bio2"></div>
                            <div class="bio3"></div>
                    </div>

Answer 1

这些方面的东西？

将html更改为：

    <div id="bios">
        <div class="bio"  data-id="1"></div>
                        <div class="bio" data-id="2"></div>
                        <div class="bio" data-id="3"></div>
                </div>

然后你的js到此：

$(".mug").click(function() {
                    $("#bios div").hide();
                    $(".bio[data-id='" + $(this).data("id") + "'", $("#bios")).show();                      
                });

通过这种方式，您可以添加任意数量的马克杯和BIOS，而无需再添加任何js。

Answer 2

最简单的方法是for循环

$(document).ready(function () {
  for (var i = 1; i <= 3; i++) { 
    $(".mug" + i).click(function() {
       $("#bios div").hide();
       $(".bio" + i).show();
    });                     
  }
});

我可能还有一种更好的方法，我没想到。

Answer 3

试试这个：

$(document).ready(function () {
    $("img[alt=mug]").each(function() {
        $(this).click(function(){
            var id = $(this).attr("class").substr(3, 1);
            $("#bios div").hide();
            $(".bio" + id).show();
        });
    });
});

Answer 4

使用.eq（）和你的照片的索引，假设第一张照片与第一张照片一起拍摄，第二张照片与第二张照片一样，等等。

http://api.jquery.com/eq/

此外，使用课程来跟踪您的活动生物，而不是在每次更新时调用所有BIOS上的隐藏。

JS：

$(document).ready(function() {
  $('#mugshots img').click(function() {
    $('#bios .active').hide().removeClass('active');
    $('#bios div').eq($(this).index()).show().addClass('active');
  });
});

HTML：

<h2>Meet the team</h2>

    <div id="mugshots">
        <img src="images/img-mugshot.jpg" alt="mug"/>
        <img src="images/img-mugshot.jpg" alt="mug"/>
        <img src="images/img-mugshot.jpg" alt="mug"/>
    </div>

    <div id="bios">
        <div></div>
        <div></div>
        <div></div>
    </div>

Answer 5

只需使用索引并添加任意数量的内容：

$('#mugshots>img').on('click', function() {
    $("#bios div").hide();
    var myIndex = $(this).index("#mugshots> img");
    $("#bios> div").eq(myIndex).show();
});

更短的版本是：

$('#mugshots>img').on('click', function() {
    $("#bios div").hide().eq($(this).index("#mugshots> img")).show();;
});

如何缩短此javascript代码？显示隐藏多个div

5 个答案: