我正在使用此plugin来编辑文字。 This is my fiddle。我想分别根据两个编辑字段的更改文本更改文本“文本1”,“文本2”。我怎么能这样做?
我试过这个脚本:
var title = $('.edit_text').editable('getValue');
$('.name-list p').html(title);
提前致谢!
答案 0 :(得分:5)
试试这个:
DEMO:FIDDLE
HTML:
<div><a href="#text1" class="edit_text">Name Me</a></div>
<div><a href="#text2" class="edit_text">Namete Me</a></div>
<div class="name-list">
<p id="text1">Text 1</p>
<p id="text2">Text 2</p>
</div>
JS:
$.fn.editable.defaults.mode = 'inline';
$('.edit_text').editable({
type: 'text',
success: function(k,val){
var id = $(this).attr("href");
$('.name-list '+ id).html(val);
}
});
<强>更新
某人要我解释这是如何运作的。我为之前没有这样做而道歉,这就是它的工作原理:我们首先创建HTML。正如您所看到的,锚标记<a>
有一个edit_text
类,因此我们可以使用它来附加.editable
方法,但它们也会保存它们链接到的ID,他们的href
属性。
在jQuery中,
我们使用bootstrap的.editable
方法( Source ),
我们将默认模式设置为“inline”,以便所有编辑都是内联完成的
而不是默认弹出方式$.fn.editable.defaults.mode = 'inline';
。
我们将.editable
方法附加到持有类.edit_text
的所有元素,并为其提供所需的选项。 $('.edit_text').editable({..})
其中一个选项是名为success
的回调,在编辑完成时会触发。
执行success
回调时,它会返回索引k
和当前元素val
的值success: function(k,val)
我们抓住该元素的href
并将其分配给id
变量。 var id = $(this).attr("href");
我们查看具有name-list
类的元素,并查找我们获得的id
的所有子项。 $('.name-list '+ id)
最后,我们放置从回调中收到的任何值val
,并将其放在找到的元素中。$('.name-list '+ id).html(val);
希望这有帮助。
答案 1 :(得分:1)
尝试这个
http://jsfiddle.net/4yn65v7c/17/
假设没有。 edit_text
等于否。在<p>
下的name-list
。
只需将脚本更改为
$.fn.editable.defaults.mode = 'inline';
$('.edit_text').editable({
success : function(k, val)
{
var i = $(".edit_text").index(this);
$('.name-list p:eq('+ i +')').html(val);
}
});