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

Conditional statement to change class by id for multiple list items

本文关键字：条件 语句 列表 id      更新时间：2023-09-26

我有两个带有列表项的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>

到目前为止，我已经可以为第一个列表项提取类了，但其余的都没有。对任何人都没什么帮助？

下面这样的怎么样。无需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'));
});
相关文章：