Question

我有一个带有.pre和.next按钮的转盘。点击.pre将li：last移到li：第一个，反过来。

如果只有一个转盘，这样可以正常工作，当我添加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>

Answer 1

您的代码显示$('.pre')，它会将点击处理程序附加到每个元素并设置pre类。因此，当用户点击一次时，两个轮播都会响应，并且每个都会添加自己的li。

您需要使您的选择器更具体，或者您的处理程序......

Answer 2

这个问题的答案在于你没有提供的第二个旋转木马的代码。我刚刚从你的代码中快速创建了一个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选择按钮，并且您也只能访问每个轮播中的列表。希望它有所帮助。

prependTo添加2个列表项而不是1

2 个答案: