用于通过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

下面这样的事情怎么样。 不需要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：

$('#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'));
});