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

您在jQuery.ajax("example.php") .done(function () { alert("success"); // Need this functionality in AngulaJS }) .fail(function () { alert("error"); }) .always(function () { alert("complete"); });：

后缺少括号

.parent

在添加新类别时，您要定位一个不存在的元素。将$(this).parent().fadeOut();更改为$('.carousel div')：

Updated fiddle.

Answer 2

要添加，请将其更改为：

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

由于div div中没有.carousel。

要删除将其更改为

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

Answer 3

您忘记了parent方法的括号：

$(this).parent.fadeOut();

应该是：

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

至于你添加元素的问题，你不能在追加后调用fadeIn方法，但是有一个解决方法。然后从选择中移除div并添加ul：

 $(".carousel div").append('<li>Test</li>').fadeIn();

应该是：

 $('<li>Test</li>').hide().appendTo('.carousel ul').fadeIn();

因为您要将列表项追加到无序列表，而不是div。

Here更新了小提琴。

如何修复从轮播中添加和删除项目的代码？

3 个答案: