Onclick隐藏/显示-下一个或上一个类

JQuery Onclick hide / show - next or previous class

本文关键字：上一个 下一个 隐藏 显示 Onclick      更新时间：2023-09-26

我正在尝试创建一个非常简单的图像滑块。虽然很简单，但是我输入的组合太多了。

这是我得到的:

<script>
        $(document).ready(function(){
            $('#1').show();
            $('#2').hide();
            $('#3').hide();
            $("next-btn").click(function(){
                $("#1").hide();
                $("#2").show();
            });
        });
  </script>
</head>
<body>
    <div id="slider">
        <div id="1" class="slide"><img src="slide-image-1" alt="" /></div>
        <div id="2" class="slide"><img src="slide-image-2" alt="" /></div>
        <div id="3" class="slide"><img src="slide-image-3" alt="" /></div>
    </div>
    <div id="previous-btn">Previous slide</div>
    <div id="next-btn">Next slide</div>

正如你可以看到的jquery代码，我要去的方式，我必须输入不同的onclick的，这取决于哪个图像被隐藏等。

我怎样才能改变这一点，这样它就可以去下一个或前一个div，并显示它时，任何一个按钮被点击，而不必添加太多的组合?

这段代码应该可以正常工作(经过测试)。我希望你能明白:)。

<script>
    var active = 0;
    var n = $('#slider div').length; // number of divs...
    $(document).ready(function(){
        showElement(1);
        $("#next-btn").click(function(){
            if (active < n) showElement(active + 1);
        });
        $("#previous-btn").click(function(){
            if (active > 1) showElement(active - 1);
        });
    });
    function showElement(id) {
        $('#slider div').hide();
        $('#' + id).show();
        active = id;
    }
</script>

active存储显示的元素的个数。当你展示其他东西时，你隐藏了一切，只展示了你需要的那一个。n用于存储最大数量的元素，这样您就不会超出作用域。

顺便说一下，这不是内存效率最高的解决方案，但修改它真的很简单，而且非常灵活。说实话，你应该跟踪哪张幻灯片被显示了，哪张被隐藏了，只隐藏被显示的那张，只显示你需要的那张。但是如果只有几张幻灯片(100张?)，性能差距不会成为问题，，而代码的清晰度和未来的可扩展性在这里要好得多。

如果将来出现问题，每次用户点击一些东西，showElement函数将修复它:隐藏所有内容，只显示您需要的内容。

看看这个链接下的工作解决方案:http://codepen.io/anon/pen/XbPogg

BTW:你可以在你的html标记中添加更多的幻灯片(id = 1,2,3,4,5,6，…)，这个脚本将不需要任何更改就可以工作。

相关文章：