javascript - 如何修复从轮播中添加和删除元素的代码？

Question

我正在调整轮播代码。现在，“上一个”和“下一个”按钮正在按预期工作。但是，我遇到了这些问题:

-单击轮播元素上的 X 不会删除该元素

-单击“音乐”、“电影”或“计算机”应该会向轮播添加一个元素，但没有任何反应。

请参阅:http://jsfiddle.net/neowot/hpLxn5om/4/我不确定代码有什么问题。

<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:100%;
    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');
        $(".carousel div").append('<li>Test</li>').fadeIn();
        $(".carousel div").find('li').last().focus();
    });

    $(document).on('click', '#MovieDiv li', function(event) {
        alert('TestMovie');
        $(".carousel div").append('<li>Test</li>').fadeIn();
        $(".carousel div").find('li').last().focus();
    });

    $(document).on('click', '#ComputerDiv li', function(event) {
        alert('TestComputer');
        $(".carousel div").append('<li>Test</li>').fadeIn();
        $(".carousel div").find('li').last().focus();
    });

    $(document).on('click', '.carousel 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

.parent 后缺少括号:

$(this).parent().fadeOut();

并且在添加新类别时，您定位的是一个不存在的元素。将 $('.carousel div') 更改为 $('.carousel ul'):

Updated fiddle.