Question

当用户点击＆＃34;音乐＆＃34;，＆＃34;电影＆＃34;或＆＃34;计算机＆＃34;时，应该将项目添加到该移动列表的末尾。相反，该项目在开头添加...如果您单击下一个或上一个按钮，然后尝试添加项目，该项目将添加到看似随机的位置。

如何解决这个问题？？

HTML

    <div id="choices">
        <ul id="MusicDiv"><li>Music</li></ul>
        <ul id="MovieDiv"><li>Movie</li></ul>
        <ul id="ComputerDiv"><li>Computer</li></ul>
    </div>


    <div id="container">

        <a href="javascript:void(0);" class="btnPrevious">Previous</a>
        <a href="javascript:void(0);" class="btnNext">Next</a>
        <div class="carousel">
            <ul>
                <li><a>x</a>1</li>
                <li><a>x</a>2</li>
                <li><a>x</a>3</li>
                <li><a>x</a>4</li>
                <li><a>x</a>5</li>
                <li><a>x</a>6</li>
                <li><a>x</a>7</li>
                <li><a>x</a>8</li>
                <li><a>x</a>9</li>
                <li><a>x</a>10</li>
                <li><a>x</a>11</li>
                <li><a>x</a>12</li>
            </ul>
        </div>    

    </div>

CSS

    #MusicDiv {
        background-color:lightblue;
        width:100px;
        text-align:center;
    }

    #MovieDiv {
        background-color:lightgreen;
        width:100px;
        text-align:center;
    }

    #ComputerDiv {
        background-color:orange;
        width:100px;
        text-align:center;
    }

    #choices li:hover {
        cursor:pointer;
    }



    #container {
        width:auto;
        height:100px;
        background-color:grey;
    }


    .carousel {
        padding-top: 20px;
        width: 357px;
        overflow: hidden;
        height: 50px;
        position: relative;
    }
    .carousel ul {
        position: relative;
        list-style: none;
        list-style-type: none;
        margin: 0;
        height: 50px;
        padding: 0;
    }
    .carousel ul li {
        position: absolute;
        height: 25px;
        width: 50px;
        float: left;
        margin-right: 1px;
        background: #f2f2f2;
        text-align: center;
        padding-top: 25px;
    }
    .carousel a {
        color:red;
        position:absolute;
        top:0;
        right:5px;
        cursor:pointer;
    }

JS

    $(document).ready(function() {

        $(document).on('click', '#MusicDiv li', function(event) {
            alert('TestMusic');
            $('<li>Music</li>').appendTo('.carousel ul');
            $(".carousel ul").find('li').last().focus();
        });

        $(document).on('click', '#MovieDiv li', function(event) {
            alert('TestMovie');
            $('<li>Movie</li>').appendTo('.carousel ul');
            $(".carousel ul").find('li').last().focus();
        });

        $(document).on('click', '#ComputerDiv li', function(event) {
            alert('TestComputer');
            $('<li>Comp</li>').appendTo('.carousel ul');
            $(".carousel ul").find('li').last().focus();
        });

        $(document).on('click', '.carousel ul li a', function(event) {
            alert('TestXButton');
            $(this).parent().fadeOut();
        });




        $(function(){
                var carousel = $('.carousel ul');
                var carouselChild = carousel.find('li');
                var clickCount = 0;
                var canClick = true;

                function numberOfElements() {
                    var carWidth=carousel.parent().width();
                    var elemWidth=carouselChild.width();
                    return Math.floor(carWidth/elemWidth);
                }

                var moveWith=numberOfElements();

                itemWidth = carousel.find('li:first').width()+1; //Including margin

                //Set Carousel width so it won't wrap
                carousel.width(itemWidth*carouselChild.length);

                //Place the child elements to their original locations.
                refreshChildPosition();



                //Set the event handlers for buttons.
                $('.btnNext').click(function(){
                    if(canClick){
                        canClick = false;

                        //Animate the slider to left as item width 
                        carousel.stop(false, true).animate({
                            left : '-='+itemWidth*moveWith
                        },600, function(){
                            //Find the first item and append it as the last item.
                            for (var i=0; i<moveWith; i++) {
                                clickCount++;
                                lastItem = carousel.find('li:first');
                                lastItem.remove().appendTo(carousel);
                                lastItem.css('left', (((carouselChild.length-1+clickCount)*(itemWidth))));
                            }
                            //refreshChildPosition();
                            canClick = true;
                        });
                    }
                });

                $('.btnPrevious').click(function(){
                    if(canClick){
                        canClick = false;
                        //Find the first item and append it as the last item.
                        for (var i=0; i<moveWith; i++) {
                        clickCount--;
                        lastItem = carousel.find('li:last');
                        lastItem.remove().prependTo(carousel);
                        console.log(itemWidth*(clickCount));
                        lastItem.css('left', itemWidth*clickCount);
                        }
                        //Animate the slider to right as item width 
                        carousel.finish(true).animate({
                            left: '+='+itemWidth*numberOfElements()
                        },300, function(){
                            canClick = true;
                        });
                    }
                });

                function refreshChildPosition(){
                    carouselChild.each(function(){
                        $(this).css('left', itemWidth*carouselChild.index($(this)));
                    });
                }
            });


    });

Answer 1

项目已正确插入DOM。但是，你没有设定自己的位置。插入后，您需要调用函数refreshChildPosition()。您需要扩展它以在开头更新carouselChild集合：

function refreshChildPosition(){
    carouselChild = carousel.find('li'); // this is new

    carouselChild.each(function(){
        $(this).css('left', itemWidth*carouselChild.index($(this)));
    });
}

当然，您需要在外部作用域中访问该函数。如果您只想进行微小的更改，我建议您在定义refreshChildPosition()的范围内的外部范围中添加一个变量：

$(document).ready(function() {

    var refresh;

    // ...
    // the click handlers (now calling refresh() at the end)
    // ...

    $(function(){
        var carousel = $('.carousel ul');
        var carouselChild = carousel.find('li');
        var clickCount = 0;
        var canClick = true;
        refresh = refreshChildPosition; // <-- give it to the outer scope

        // ... rest of your code

这当然不是最好的解决方案，但至少它可以解决您的直接问题。

如何确保将项目添加到移动列表的末尾？

1 个答案: