通过 id 为多个列表项更改类的条件语句

Question

我有 2 个带有列表项的 div，我试图在放置时切换类。代码如下所示。

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

我正在尝试将类从“stagearea”类切换到另一个由列表项中设置的唯一 ID 拉动的类。我的 javascript 看起来像这样。

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

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

Answer 1

下面这样的事情怎么样。不需要身份证：

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

$('#sortable2').on('click','.stagearea', function () {
  var $t=$(this);  //get item that was clicked on
  //read the addclass attribute and add it as a  class
  $t.addClass($t.attr('data-addclass'));
});

Jquery 小更新

$('#sortable2').on('droppable','.stagearea', function () {
  var $t=$(this);  //On droppable rather than on click.
  //read the addclass attribute and add it as a  class
  $t.addClass($t.attr('data-addclass'));
});