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

<强>更新

某人要我解释这是如何运作的。我为之前没有这样做而道歉，这就是它的工作原理：

我们首先创建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);

希望这有帮助。

Answer 2

尝试这个

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

    }
});

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

2 个答案: