Javascript JQuery Onclick hide/show-next或previous类_Javascript_Jquery

Javascript JQuery Onclick hide/show-next或previous类

javascript jquery

Javascript JQuery Onclick hide/show-next或previous类,javascript,jquery,Javascript,Jquery,我试图创建一个非常简单的图像滑块。虽然很简单，但我的方式是，我必须输入太多的组合这就是我得到的： <script> $(document).ready(function(){ $('#1').show(); $('#2').hide(); $('#3').hide(); $("next-btn").click(function(){

我试图创建一个非常简单的图像滑块。虽然很简单，但我的方式是，我必须输入太多的组合

这就是我得到的：

<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>


$（文档）.ready（函数（）{
$（'#1'）.show（）；
$（'#2'）.hide（）；
$（'#3'）.hide（）；
$（“下一个btn”）。单击（函数（）{
$（“#1”）.hide（）；
$（“#2”）.show（）；
});
});
上一张幻灯片
下一张幻灯片

正如您从jquery代码中看到的，我将不得不根据隐藏的图像等输入不同的onclick

如何更改此选项，使其可以转到下一个或上一个div，并在单击任一按钮时显示，而不必添加太多组合？

此代码应正常工作（已测试）。我希望你会有这样的想法：）


var-active=0；
变量n=$（'#滑块div'）。长度；//分区数。。。
$（文档）.ready（函数（）{
展示元素（1）；
$（“#下一个btn”）。单击（函数（）{
如果（激活1）showElement（活动-1）；
});
});
函数showElement（id）{
$（'#slider div'）.hide（）；
$（'#'+id）.show（）；
活动=id；
}

active

存储显示的元素数量。当你展示其他东西时，你隐藏了一切，只展示你需要的东西<代码>n用于存储最大数量的元素，这样您就不会超出范围

顺便说一句，这不是最节省内存的解决方案，但修改它非常简单，而且非常灵活。老实说，您应该跟踪显示的幻灯片和隐藏的幻灯片，只隐藏显示的幻灯片，只显示您需要的幻灯片。但是如果只有很少的幻灯片（100？），性能差距在这里不会成为问题，而代码的清晰性和未来的可扩展性在这里要好得多。

此外，如果将来出现问题，每次用户单击某个内容时，showElement函数都会修复它：隐藏所有内容，并仅显示所需的内容

查看此链接下的工作解决方案：

顺便说一句：你可以在你的html标记中添加更多的幻灯片（id=1，2，3，4，5，6，…），这个脚本将在没有任何更改的情况下工作

您的代码似乎只显示id 1。。。不去下一个了看看链接，我更新了我的问题。更新：你是对的，我忘记了前面代码中的两个哈希。Sry，是我的错。更新，工作！祝你好运它在我的页面上不工作，尽管它在代码笔上工作。。。你在codepen外面试过吗？对我不起作用：o/也许您正在覆盖n或其他地方的活动变量？您确定包含JQuery吗？这听起来很有趣，但也许这就是一个例子？尝试将

更改为

slidern

并将

active

更改为

sldieractive

变量名，然后重试。它应该可以工作：）。

<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>