Question

我有一个列表，可以使用jQuery UI进行排序：

<ol id="sortable" class="ui-sortable">
  <li style="margin-left:10px; width:100%;" class="block_anchor" data-id="498">Step 1</li>
  <li style="margin-left:10px; width:100%;" class="block_anchor" data-id="499">Step 2</li>
  <li style="margin-left:10px; width:100%;" class="block_anchor" data-id="500">Step 3</li>
  <li style="margin-left:10px; width:100%;" class="block_anchor" data-id="501">Step 4</li>
</ol>

当页面加载时，没有任何<li>项：我通过单击按钮将它们与jQuery一起添加。

现在，我可以对列表进行排序，但我也希望能够在点击<li></li>元素时更改位置。我用css属性order跟踪元素位置（<ol>元素是一个弹性框，因此每个项目都有一个订单）。我尝试做的是在点击它时增加1的元素的顺序。

这是我到目前为止所做的：

$('#sortable li').map(function(i, item){
  var id = $(item).data('id');
  $('li[data-id='+ id +']').on( "click", function() {
    console.log("Clicked");
    $('li[data-id='+ id +']').css('order', i + 1);
  })
});

但即使是console.log也没有出现。这是因为<li>项是在按钮上添加的，所以在执行函数时它们不会在页面加载时出现吗？

我该如何继续前进？

编辑：这不是重复，提到的主题是重新排序所有内容，这不是我尝试在这里做的原因

Answer 1

~~检查.map回调的作用，第一个参数返回该项，第二个参数将为您提供索引。~~

~~我认为那就是你在那里做错了，因为当你增加 i var时，你实际上是在从你得到的元素中加1列表~~

忘掉我之前说过的内容，它使用了jQuery map，所以它就像你之前写的一样。

这可以帮助您实现您的目标：

$('#sortable li').map(function(i, item){
    var id = $(item).attr("data-id");

    // This will set the order of each item based on the position in the array.
    $('li[data-id='+ id +']').css('order', i)

    $('li[data-id='+ id +']').on( "click", function() {
      console.log("Clicked");

      var clickedItem = $('li[data-id='+ id +']'),
          currentOrder = Number(clickedItem.css('order'));

      clickedItem.css('order', currentOrder + 1);
    })
});

https://jsfiddle.net/jLqouzv4/

jQuery Sortable：onClick增量位置

1 个答案: