【问题标题】:jquery sortable: The dropped sortable list item should have a class applied removing similar class in other itemsjquery sortable:删除的可排序列表项应该应用一个类,删除其他项目中的类似类
【发布时间】:2013-08-01 14:21:57
【问题描述】:

我有一个 HTML 列表

<ul id="sections" class="ui-sortable">
  <li class="selected">one</li>
  <li> two</li>
  <li>three</li>
  <li> four  </li>
  <li>five</li>
  <li> six </li>
</ul>

该列表可使用 jQuery UI 进行排序。

最初,第一个列表项有一个“选定”类。如果用户拖动任何项目并更改列表的顺序,则在新位置放置的列表项应具有“已选择”类,并且应删除任何其他“已选择”列表项类。

在任何时间点都只能有一个“已选择”类的列表项。

如何实现这一点,我正在尝试使用 beforestop、stop、change events 但我无法弄清楚

  $( "#sections" ).sortable({
              stop: function( event, ui ) {

                    var present = $(ui.item).addClass("selected");
                    console.log(present);
                  }
            });

【问题讨论】:

    标签: jquery jquery-ui jquery-ui-sortable


    【解决方案1】:

    试试这个

    stop: function( event, ui ) {
                      $(this).find('.selected').removeClass("selected")
    
                        var present = $(ui.item).addClass("selected");
                        console.log(present);
                      }
    

    DEMO

    【讨论】:

      【解决方案2】:

      使用 .siblings()

       $( "#sections" ).sortable({
            stop: function( event, ui ) {
              $(ui.item).addClass("selected").siblings().removeClass('selected');
            }
       });
      

      demo

      【讨论】:

        猜你喜欢
        • 2021-10-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-03-20
        • 2012-06-26
        • 1970-01-01
        • 1970-01-01
        • 2015-09-30
        相关资源
        最近更新 更多