2

我有一个从 JSON 文件加载的可排序文件。这是一个可排序的 jquery http://jqueryui.com/demos/sortable

但我想编辑一项。之前的项目是从用户插入的。例如，查看http://jqueryui.com/demos/sortable我想要第 3 项。如何？

现在我想用一个变量的字符串来编辑一个项目，例如 Littlebirds，使用JavaScript或jQuery 。这个变量是从用户插入的textarea。（我知道）。

如何使用变量编辑项目的可排序？？？

我从textarea必须取消的元素名称中收到。

<textarea></textarea>

我知道您如何分析列表但编辑（更改）名称的可排序项目？

可排序的 HTML 代码：

<div id="sortparam">

<ul style="" class="ui-sortable" id="sortable">
    <li style="" id="1" class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Singular sensation</li>
    <li style="" id="2" class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Beady little eyes</li>
    <li style="" id="3" class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Little birds </li>
</ul>

</div>

拜托，我不要contenteditable

4

2 回答 2

1

您需要定位文本节点或替换元素的完整 html。我们无法知道您打算如何定位要编辑的可排序对象。

以下解决方案存储图标 html，并更新元素的完整 html。

演示：http: //jsfiddle.net/WZeMH/

/* no relationship given on how to determine which sortable to edit use second one*/
var whichSortable= 2;

/* define sortable element to edit */
var $sortableEl=$('#'+whichSortable);

/* store icon span html string*/
var iconSpan=$('<div>').append( $sortableEl.find('.ui-icon').clone() ).html();

$('textarea').keyup(function(){
    var val=$(this).val();
     $sortableEl.html( iconSpan + val);    
})
于 2012-06-23T09:02:46.757 回答
0

只是一个例子：

假设，你有一个textbox类似的：

<input type="text" id="your_text">

现在您可以将keyup事件绑定到它textbox并使用文本更新 sortableli的内容。

var li = $('#sortable li#3'),           // reference of li
    originalVal = li.text(),            // keep reference of original 
                                        // text(e.g Little birds)
    iconSpan = li.find('span.ui-icon'); // take the span icon

$('#your_text').keyup(function() {       // bind a keyup event
  var val = $.trim( this.value );        // take new value on each keyup
  if( val ) {                            // if new value entered
    li.html( iconSpan + val );           // set new value to little birds
  } else {                               // if text box is empty
     li.html( iconSpan + originalVal );  // set original value
  }
});

但我认为您应该拥有相同数量textbox的sortable元素，并且您可以textbox通过其他过程获得价值。

于 2012-06-23T08:29:24.217 回答