如何从引导可编辑插件获得可编辑文本值

Question

我正在使用此plugin编辑文本。 This is my fiddle。我想分别根据两个编辑字段的文本更改文本“文本1”，“文本2”。我怎样才能做到这一点？

我试图与此脚本：

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

提前感谢！

Answer 1

试试这个：

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); 
    } 
}); 

---

UPDATE

我被某人问到解释这是如何工作的。我很抱歉没有这样做，这是如何工作的：

我们首先创建HTML。如您所见，锚定标记<a>有一类edit_text，因此我们可以使用它来附加.editable方法，但它们也会保存其链接到的ID的href属性。

在jQuery中，

• 我们用引导的.editable方法（Source），

• 我们设置的默认模式为 “内联”，让所有的编辑都在线完成 而不是通过默认弹出方式$.fn.editable.defaults.mode = 'inline';。

• 我们将.editable方法附加到所有持有类.edit_text的元素，我们给它所需的选项。 $('.edit_text').editable({..})

• 其中一个选项是称为success的回调，当编辑完成时会触发该回调。

• 当success回调执行，它返回我们抓住该元素的href并将其分配给id变量指数k和当前元素success: function(k,val)

• 的价值val。 var id = $(this).attr("href");

• 我们看看类name-list的元素，并找到我们获得的id的任何孩子。$('.name-list '+ id)

• 最后，我们将我们从回调中收到的任何值val放置到找到的元素中。 $('.name-list '+ id).html(val);

希望这会有所帮助。

Answer 2

试试这个

http://jsfiddle.net/4yn65v7c/17/

，并假设没有。的edit_text等于no。 <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); 

    } 
});