Javascript 用于按id更改多个列表项的类的条件语句

我有两个div，其中包含我试图在drop上切换类的列表项。代码如下所示

<div class="wrapper">                                           
    <div id="togglelinks" class="left-column">
        <ul id="sortable1" class="sortable">
            <li class="ui-state-default"><a href=""><img src="img/icon-music.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-nav.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-seats.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-phone.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-weather.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-email.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-calendar.svg" /></a></li>
        </ul>
    </div>
    <div id="stage" class="right-column">
        <ul id="sortable2" class="sortable">
            <li id="music" class="stagearea"><!-- Content Here --></li>
            <li id="nav" class="stagearea"><!-- Content Here --></li>
            <li id="climate" class="stagearea"><!-- Content Here --></li>
            <li id="phone" class="stagearea"><!-- Content Here --></li>
            <li id="weather" class="stagearea"><!-- Content Here --></li>
            <li id="email" class="stagearea"><!-- Content Here --></li>
           <li id="calendar" class="stagearea"><!-- Content Here --></li>
        </ul>
    </div>
</div>

<script>
  if ($("#music").addClass('droppedmusic')) {       
  }
  else if ($("#nav").addClass('droppednav')) {
  }
  else if ($("#climate").addClass('droppedclimate')) {
  } 
  else if ($("#phone").addClass('droppedphone')) {
  }
  else if ($("#weather").addClass('droppedweather')) {
  }
  else if ($("#email").addClass('droppedemail')) {
  }
  else if ($("#calendar").addClass('droppedcalendar')) {
  }
</script>

我试图将该类从类“stagearea”切换到由列表项中设置的唯一id拉入的另一个类。我的javascript看起来像这样

<div class="wrapper">                                           
    <div id="togglelinks" class="left-column">
        <ul id="sortable1" class="sortable">
            <li class="ui-state-default"><a href=""><img src="img/icon-music.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-nav.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-seats.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-phone.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-weather.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-email.svg" /></a></li>
            <li class="ui-state-default"><a href=""><img src="img/icon-calendar.svg" /></a></li>
        </ul>
    </div>
    <div id="stage" class="right-column">
        <ul id="sortable2" class="sortable">
            <li id="music" class="stagearea"><!-- Content Here --></li>
            <li id="nav" class="stagearea"><!-- Content Here --></li>
            <li id="climate" class="stagearea"><!-- Content Here --></li>
            <li id="phone" class="stagearea"><!-- Content Here --></li>
            <li id="weather" class="stagearea"><!-- Content Here --></li>
            <li id="email" class="stagearea"><!-- Content Here --></li>
           <li id="calendar" class="stagearea"><!-- Content Here --></li>
        </ul>
    </div>
</div>

<script>
  if ($("#music").addClass('droppedmusic')) {       
  }
  else if ($("#nav").addClass('droppednav')) {
  }
  else if ($("#climate").addClass('droppedclimate')) {
  } 
  else if ($("#phone").addClass('droppedphone')) {
  }
  else if ($("#weather").addClass('droppedweather')) {
  }
  else if ($("#email").addClass('droppedemail')) {
  }
  else if ($("#calendar").addClass('droppedcalendar')) {
  }
</script>

if（$（“#音乐”）.addClass（'droppedmusic'）{
}
else if（$（“#nav”）.addClass（'droppednav'））{
}
else if（$（“#climate”）.addClass（'droppedclimate'））{
} 
else if（$（“#phone”）.addClass（'droppedphone'））{
}
else if（$（“#weather”）.addClass（'droppedweather'））{
}
else if（$（“#email”）.addClass（'droppedmail'））{
}
else if（$（“#日历”）.addClass（'droppedcalendar'））{
}

---

到目前为止，我能够为第一个列表项提取类，但其余的都没有。没什么帮助吗？

下面这样怎么样。不需要ID：

<div id="stage" class="right-column">
    <ul id="sortable2" class="sortable">
        <li class="stagearea" data-addclass="droppedmusic"><!-- Content Here --></li>
        <li class="stagearea" data-addclass="droppednav"><!-- Content Here --></li>
        <li class="stagearea" data-addclass="droppedclimate"><!-- Content Here --></li>
        <!--etc -->
    </ul>
</div>

小Jquery更新

---

您通过ID确定目标，添加一个类，然后检查集合中是否有多个元素，并且由于ID是唯一的，并且jQuery将只获取具有给定ID的第一个元素，这些集合中永远不会有多个元素。对于每个不同的ID，我都设置了要应用于下拉列表项的类。每个元素都是一个唯一的大小。你不明白，

$（“#climate”）。长度

最多不会超过

1

，因为jQuery不会获得具有相同ID的多个元素。好吧，我只是修改了javascript，但仍然只获得了第一个拖放类。我更新了上面我现在使用的内容。您的

if

语句没有任何作用。您正在添加一个类作为

if

的条件。第一个条件每次都返回

true

，因为

$（“#音乐”）

不是“假”值。你只是简单地给它添加了一个类，然后JS说“是的，它就在那里”，然后从你的代码中掉了出来。嗯，我明白你的意思，我喜欢这个概念，但现在看来我右边的专栏里什么都没有。我已经完全删除了我的“如果声明”，因为我看到了你在上面的评论中所说的话。正如您可能知道的，我对这种类型的编码相当陌生。我花了一分钟的时间才清醒过来。无论如何，我感谢所有的帮助。一旦我得到了我的模型的工作版本，我将把它发布在Github和JFiddle上。我在网上找到了很多我用来整合的东西，但是还没有任何东西具备我所需要的所有功能。@PatrickM我必须在更改可用之前批准它。。。我现在有了它。我将单击更改为可拖放。我只是在此处将当前代码添加到我的JSFIDLE-->左侧的链接不起任何作用（

href=”“

）。我想我不明白你想在小提琴上做什么。。。。

droppable

事件（以前称为

click

事件）位于

sortable2

上，该事件位于右侧列中，没有内容。。。。如果你把这个添加到你的css中，你会看到我在说什么<代码>#可排序2{背景色：红色；}