jQuery sortable 在排序后使用图像 ID 更新隐藏字段

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 的新顺序。

此刻，当用户更改订单时，我的代码returns如下,

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

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

Answer 1

$(this) 在 update 函数 returns 父 ul 元素 .

尝试在 update 回调中用选择器 $("> li img", this) 替换 this ；使用 $.map() , Array.prototype.join() 和参数 ","

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

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

jQuery sortable 在排序后使用图像 ID 更新隐藏字段

jQuery sortable update a hidden field with image ID's after sorting

jquery

jquery-ui

input

jquery-ui-sortable