Question

当我加载第一个滑块文本1时，我正在使用3个滑块其他两个文字都是隐藏的。就像我明智地写了两个滑块但只在我每次运行时才运行第三个滑块滑块3仅起作用。

<script>
$(document).ready(function() {
    <!--- slider 1   ---->  

    $("#slide1").load("/startup.php#Screenshots", function() {

        $(".arc111").show();
        $(".arc112").hide();
        $(".arc113").hide();
    });

    <!--- slider 2   ---->     

    $("#slide2").load("/startup.php#Screenshots/slide2", function() {

        $(".arc112").show();
        $(".arc111").hide();
        $(".arc113").hide();

    });

    <!--- slider 3   ---->  

    $("#slide3").load("/startup.php#Screenshots/slide3", function() {

        $(".arc113").show();
        $(".arc112").hide();
        $(".arc111").hide();

    });

});
</script>



<p class="arc111"> text1</p>
<p class="arc112"> text2</p>
<p class="arc113"> text3</p>

Answer 1

我对你的代码的理解是，在读取时加载的页面，它加载＃slide1，然后加载＃slide2，然后加载＃slide3 ... 不知道你想做什么，但是，也许你更愿意在div上处理一个事件，然后加载它们。所以

$("#slide1").click(function() {
   $("#slide1").load(....

Answer 2

在$(document).ready中，您正在加载所有幻灯片。即它将加载slide1，slide2和slide3。因此每次都可以看到第三张幻灯片。更改代码以触发每个滑块的加载事件。喜欢 -

$(document).ready(function() {

     $(".arc111").show();
     $(".arc112").hide();
     $(".arc113").hide();

     $("#slide1").click(function() {
         $( "#slide1" ).load( "/startup.php", function() {
            $(".arc111").show();
            $(".arc112").hide();
            $(".arc113").hide();
       });
     });

    $("#slide2").click(function() {
       $( "#slide2" ).load( "/startup.php", function() {
            $(".arc112").show();
            $(".arc111").hide();
            $(".arc113").hide();
        });
    });

    $("#slide2").click(function() {
       $( "#slide3" ).load( "/startup.php", function() {
            $(".arc113").show();
            $(".arc112").hide();
            $(".arc111").hide();
       });
    });
});

修改

我查看了您在评论中提到的网站。我想你想要做的是当用户点击你想要显示的下一个和上一个图标并隐藏相应的div时。

使用以下代码执行此操作。

$(document).ready(function() { $(".arc111").hide(); $(".arc112").hide(); $(".arc113").hide(); $('body').on('click', '.fp-next', function () { changeText(); }); $('body').on('click', '.fp-prev', function () { changeText(); }); function changeText(){ $(".arc112").hide(); $(".arc111").hide(); $(".arc113").hide(); switch ($(".fp-slidesContainer .active").prop("id")) { case "slide1": $(".arc111").show(); break; case "slide2": $(".arc112").show(); break; case "slide3": $(".arc113").show(); break; default: } } });

JQuery隐藏和显示不适用于所有滑块的功能

2 个答案: