Question

我试图通过2个按钮（下一个和上一个）滑过我页面上的两个不同的div。

它基本上就像您在安装软件时看到的设置向导。

所以这是标记：

<div id="container">

        <div id="box1" class="box">
            <button id="nxt">Next</button>
            <button id="prv">Previous</button>
        </div>
        <div id="box2" class="box">
            <button id="nxt">Next</button>
            <button id="prv">Previous</button>
        </div>

    </div>

这里是两个按钮的JQuery：

$('#nxt').click(function() {

                    $(this).parent(".box").animate({left: '-150%'}, 500 );
                    $(this).parent(".box").next(".box").animate({left: '50%'},500);
        });
 $('#prv').click(function() {

            $(this).parent(".box").animate({left: '150%'}, 500 );
            $(this).parent(".box").prev(".box").animate({left: '50%'},500);
            });

我能够执行＆＃34; next＆＃34;操作但不是＆＃34;之前的＃34;一，jquery有一个错误，请帮帮我。

您还可以浏览this fiddle

谢谢

Answer 1

您不得对多个元素使用相同的ID。请改用class属性，参见下面的标记和jquery;

HTML：将ID更改为上一个和下一个按钮的类

<div id="container">
    <div id="box1" class="box">
       <button class="nxt">Next</button>
       <button class="prv">Previous</button>
    </div>
    <div id="box2" class="box">
       <button class="nxt">Next</button>
       <button class="prv">Previous</button>
    </div>

</div>

jQuery：在类属性的jquery选择器中进行更改，并保留其余的代码。

$('.nxt').click(function() {
    $(this).parent(".box").animate({left: '-150%'}, 500 );
    $(this).parent(".box").next(".box").animate({left: '50%'},500);
});

$('.prv').click(function() {    
    $(this).parent(".box").animate({left: '150%'}, 500 );
    $(this).parent(".box").prev(".box").animate({left: '50%'},500);
});

<强> JSFiddle Demo

Answer 2

您在.animate({left: '-50%'}

中错过了$('#prv').click(function(){}

<强> JSFiddle link

Answer 3

您对第一个div和第二个div中的按钮使用相同的ID。这是不对的，这是问题的根源。查看this fiddle以查看正确的版本。

＆＃13;

$('#nxt').click(function() {
            $(this).parent(".box").animate({left: '-150%'}, 500 );
            $(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv1').click(function() {
    $(this).parent(".box").animate({left: '150%'}, 500 );
    $(this).parent(".box").prev(".box").animate({left: '50%'},500);
});

＆＃13;

#container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.box {
    position: absolute;
    width: 50%;
    background-color: white;
    height: 500px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 50%;
    top: 100px;
    margin-left: -25%;
}

#box2 {
    left: 150%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

            <div id="box1" class="box">
                <button id="nxt">Next</button>
                <button id="prv">Previous</button>
            </div>
            <div id="box2" class="box">
                <button id="nxt1">Next</button>
                <button id="prv1">Previous</button>
            </div>

        </div>

＆＃13;

使用下一个和上一个按钮滑过div

3 个答案: