如何從引導可編輯插件獲得可編輯文本值

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

    } 
});