1

我有一个带有 .pre 和 .next 按钮的旋转木马。单击 .pre 会将 li:last 移动到 li:first，反之亦然。

如果只有一个旋转木马，这很好用，当我添加 2 个具有不同 ID 的旋转木马时，单击 .pre 会在前面添加 2 li 而不是 1。这是为什么呢？

        <div class="carrousel" id="featuredAppartments">

            <a href="" class="move pre">Previous</a> <a href="" class="move next ">Next</a>

            <div class="list">
                <ul>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonLowered">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonRented">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                    <li><a href=""><div class="imgWrap"><img src="assets/img/thumb2.png" alt=""><i class="ico ribbonNew">Featured</i></div> <p><strong>Amsterdam</strong> Grachtengordel <br> € 2500,00</p></a></li>
                </ul>
            </div>

            <script>

                $(document).ready(function() {

                    var t = $('#featuredAppartments ul');

                    $('.next').click(function(event) {event.preventDefault();t.find('li:first').appendTo(t);});
                    $('.pre').click(function(event) {event.preventDefault();t.find('li:last').prependTo(t);});

                });

            </script>

        </div>

更新：

我将脚本更改为这个，但第二个轮播仍然添加 2 li 而不是仅 1。

            <script>

                $(document).ready(function() {

                    var t = $('#featuredAppartments ul');

                    $('#featuredAppartments .next').click(function(event) {event.preventDefault();t.find('li:first').appendTo(t);});
                    $('#featuredAppartments .pre').click(function(event) {event.preventDefault();t.find('li:last').prependTo(t);});

                });

            </script>
4

2 回答 2

0

您的代码说$('.pre')，它将单击处理程序附加到具有类集的每个元素。pre所以当用户点击一次时，两个轮播都会响应，并且各自添加自己的li。

你会想让你的选择器更具体，或者你的处理程序......

于 2012-12-14T15:21:48.457 回答
0

这个问题的答案在于您没有提供的第二个轮播代码。我刚刚从您的代码中快速制作了一个 jsfiddle。它没有任何好的标记，所以我建议重写它。http://jsfiddle.net/PQQEe/

基本上你可能忘记适当地改变一些变量..比如你的 t.find..

假设第二个旋转木马的 ID 为“更多”。所以你的 JS 看起来像：

$(document).ready(function() {
    var t = $('#featuredAppartments ul');

    $('#featuredAppartments .next').click(function(event) {event.preventDefault();t.find('li:first').appendTo(t);});
    $('#featuredAppartments .pre').click(function(event) {event.preventDefault();t.find('li:last').prependTo(t);});

    var d = $('#more ul');

    $('#more .next').click(function(event) {event.preventDefault();d.find('li:first').appendTo(d);});
    $('#more .pre').click(function(event) {event.preventDefault();d.find('li:last').prependTo(d);});

});

您现在通过轮播 ID 选择按钮，并且您也只能访问每个轮播中的列表。希望能帮助到你。

于 2012-12-14T17:10:15.213 回答