Question

我有以下html：

<section class="layers-multi-image-container layers-has-multi-image">

<ul class="layers-multi-image-list multi-image-list layers-sortable ui-sortable">
<!-- Image -->

<li>
  <span class="layers-multi-image-remove"></span>
  <img id="3942" class="multi-image-reveal" src="http://www.samskirrow.com/skizzar-test/wp-content/uploads/2015/11/10421285_704957996239240_3163365373846263623_n-150x150.jpg" height="100" width="100">
</li>

<li>
  <span class="layers-multi-image-remove"></span>
  <img id="3941" class="multi-image-reveal" src="http://www.samskirrow.com/skizzar-test/wp-content/uploads/2015/11/10410229_625721974162843_807090703954128681_n-150x150.jpg" height="100" width="100">
</li>

<li>
  <span class="layers-multi-image-remove"></span>
  <img id="3940" class="multi-image-reveal" src="http://www.samskirrow.com/skizzar-test/wp-content/uploads/2015/11/10393797_700706529997720_5352493934534579125_n-150x150.jpg" height="100" width="100">
</li>

<li>
  <span class="layers-multi-image-remove"></span>
  <img id="3939" class="multi-image-reveal" src="http://www.samskirrow.com/skizzar-test/wp-content/uploads/2015/11/1375655_695160727218967_999194590829985843_n-150x150.jpg" height="100" width="100">
</li>

<li>
  <span class="layers-multi-image-remove"></span>
  <img id="3938" class="multi-image-reveal" src="http://www.samskirrow.com/skizzar-test/wp-content/uploads/2015/11/995923_479016332166742_287465340_n-150x150.jpg" height="100" width="100">
</li>

<li>
  <span class="layers-multi-image-remove"></span>
  <img id="3937" class="multi-image-reveal" src="http://www.samskirrow.com/skizzar-test/wp-content/uploads/2015/11/941640_453041514764224_1669353328_n-150x150.jpg" height="100" width="100">
</li>

<li>
  <span class="layers-multi-image-remove"></span>
  <img id="3947" class="multi-image-reveal" src="http://www.samskirrow.com/skizzar-test/wp-content/uploads/2015/11/10489808_625721990829508_5517316366768913809_n-150x150.jpg" height="100" width="100">
</li>

</ul>

  <input type="text" class="image_ids" id="widget-layers-widget-gallery-33-images" name="widget-layers-widget-gallery[33][images]" value="3942,3941,3940,3939,3938,3937,3947">
</section>

上面例子中的图像是由用户动态插入的，即可能有更多或更少的图像，并且它们都具有唯一的ID。

我正在使用jQuery sortable来允许我的用户更改顺序，如下所示：

 jQuery(document).ready(function($) {

$("ul.layers-multi-image-list").sortable({
    placeholder: "ui-state-highlight",
    update: function(event, ui) {
      var ordering = $(this).sortable('toArray').toString();
      $('.image_ids').val(ordering);
   }
});

   $('ul.layers-multi-image-list').disableSelection();
});

当用户更改图像的顺序时，我希望在文本输入中更新新的图像ID顺序。

此时，当用户更改订单时，我的代码返回以下,,,,,,,,,

这是一个显示我的问题的jsfiddle：

https://jsfiddle.net/5afo47k1/4/

Answer 1

$(this)函数的

update会返回父ul元素。

尝试在$("> li img", this)回调时将this替换为update;使用$.map()，Array.prototype.join()参数","

  var ordering = $.map($("> li img", this), function(el) {return el.id}).join(",");

jsfiddle https://jsfiddle.net/5afo47k1/5/

jQuery可排序在排序

1 个答案: