Javascript 如何修复从转盘添加和删除项目的代码？

我正在调整旋转木马的代码。现在，“上一步”和“下一步”按钮按预期工作。但是，我有以下问题：

-单击旋转木马项目上的X不会删除该项目

-单击“音乐”、“电影”或“计算机”应将一个项目添加到旋转木马中，但什么也没有发生

请看：我不确定代码出了什么问题

<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>

JS

$（文档）.ready（函数（）{
$（文档）。在（'click'，'MusicDiv li'，函数（事件）{
警报（“测试音乐”）；
$（“.carousel div”）.append（“
Test
”）.fadeIn（）；
$（“.carousel div”）.find（'li'）.last（）.focus（）；
});
$（文档）。在（'click'，'#MovieDiv li'，函数（事件）{
警报（“TestMovie”）；
$（“.carousel div”）.append（“
Test
”）.fadeIn（）；
$（“.carousel div”）.find（'li'）.last（）.focus（）；
});
$（文档）。在（'click'，'#ComputerDiv li'，函数（事件）{
警报（“测试计算机”）；
$（“.carousel div”）.append（“
Test
”）.fadeIn（）；
$（“.carousel div”）.find（'li'）.last（）.focus（）；
});
$（文档）.on（'单击'，'.carousel li a'，函数（事件）{
警报（“TestXButton”）；
$（this.parent.fadeOut（）；
});
$（函数（）{
变量carousel=$（'.carousel ul'）；
var carouselChild=carousel.find（'li'）；
var-clickCount=0；
var canClick=true；
函数numberOfElements（）{
var carWidth=carousel.parent（）.width（）；
var elemWidth=carouselChild.width（）；
返回数学地板（车宽/宽度）；
}
var moveWith=numberOfElements（）；
itemWidth=carousel.find（'li:first'）.width（）+1；//包括边距
//设置转盘宽度，使其不会缠绕
转盘宽度（项目宽度*转盘长度）；
//将子图元放置到其原始位置。
refreshChildPosition（）；
//设置按钮的事件处理程序。
$（'.btnNext'）。单击（函数（）{
如果（canClick）{
canClick=false；
//将滑块向左设置为项目宽度
旋转木马。停止（假，真）。设置动画({
左：'-='+itemWidth*moveWith
}，600，函数（）{
//找到第一项并将其作为最后一项附加。
对于（var i=0；i，在
.parent
之后缺少括号：

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

添加新类别时，您的目标是不存在的元素。将
$（'.carousel div'）
更改为
$（'.carousel ul'）
：

要添加，请将其更改为：

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

您忘记了
父方法的括号：

$(this).parent.fadeOut();

应该是：

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

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

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

$（“.carousel div”）.append（“
Test
”）.fadeIn（）；

应该是：

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

$（'
Test
）.hide（）.appendTo（'.carousel ul'）.fadeIn（）；

因为您希望将列表项附加到无序列表，而不是附加到div

更新了fiddle。
ahhh。事情就是这样。谢谢！：）@Neo，但是这个答案并不是
fadeIn（）
你想要的内容。这是你最初要求的。你不能在
.append（）之后调用
.fadeIn（）
）
。它不起作用。哦，我现在了解了fadeIn。谢谢！我将改用此版本，它现在应该更容易使用了！很高兴我能为您@Neo.：）
$(this).parent().fadeOut();

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

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