如何从bootstrap可编辑插件获取可编辑的文本值

Question

我正在使用这个插件来编辑文本.这是我的小提琴.我想分别根据两个编辑字段的更改文本更改文本"文本1","文本2".我怎样才能做到这一点？

我试过这个脚本:

var title = $('.edit_text').editable('getValue');
$('.name-list p').html(title);

提前致谢!

Answer 1

试试这个:

演示: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);
    }
});

UPDATE

有人要我解释这是如何工作的.我为之前没有这样做而道歉,这是它的工作原理:

我们首先创建HTML.正如您所看到的,锚标记<a>有一个类,edit_text以便我们可以使用它来附加.editable方法,但它们也会在其href属性中保存它们链接到的ID .

在jQuery中,

• 我们使用bootstrap的.editable方法(Source),

• 我们将默认模式设置为"内联",以便所有编辑都是内联而不是默认弹出方式$.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);

希望这可以帮助.