jQuery的排序更新排序

我有以下HTML後與圖像ID的一個隱藏字段：jQuery的排序更新排序

<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的排序，以讓我的用戶更改順序，如下所示：

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/

來源

2016-01-21 Sam Skirrow

$(this) at 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/

來源

2016-01-21 17:18:32 guest271314

完美，謝謝 –

jQuery的排序更新排序

回答

相關問題