Question

我正在使用jquery创建动态LI。

我有这个jquery用于更改li的名称。我不想创建一个带有li的ID的新函数来执行此操作。我不认为这是最好的方法。成像我加100 li，我将有100个功能。这将是最好的方法。

我的演示在这里：http://jsfiddle.net/DiegoTc/dXX9G/

<div class="col-md-3 well">
<ul class="nav nav-pills nav-stacked" id="myTab">
<li id="pTabP" class="active">
    <a href="#tab_preview" data-toggle="pill">
        <span  id ="tabPr1" class="display">Preview Card</span>
        <input type="text" class="edit" style="display:none"/>
    </a>
</li>
<li id="fTab">
    <a href="#tab_GInfo" data-toggle="pill">
        <span  id ="tabG1" class="display">General Info</span>
        <input type="text" class="edit" style="display:none"/>
    </a>
</li>


 $("#pTabP").dblclick(function(){
   $("#tabPr1").hide().siblings(".edit").show().val($("#tabPr1").text()).focus();
 });
 $("#fTab").dblclick(function(){
   $("#tabG1").hide().siblings(".edit").show().val($("#tabG1").text()).focus();
 });
 $(".edit").focusout(function(){
    $(this).hide().siblings(".display").show().text($(this).val());
 });

Answer 1

我为每个范围添加了一个edit_text类。然后，双击它后，它将自动找到文本框并显示它。

我很确定这就是你想要的：http://jsfiddle.net/dXX9G/3/

$(this).hide().siblings(".edit").show().val($(this).text()).focus();

Answer 2

你可以这样做：

function getDblClickHandler (targetSelector) {
    return function () {
        var $target = $('#' + targetSelector);
        $target.hide();
        $target.siblings(".edit")
          .show()
          .val($target.text())
          .focus();
    };
}

$("#pTabP").dblclick(getDblClickHandler('#tabPr1'));
$("#fTab").dblclick(getDblClickHandler('#tabG1'));

或者，更紧凑：

var mappings = [
   { from: '#pTabP', to: '#tabPr1'},
   { from: '#fTab', to: '#tabG1'}
];

$.each(mappings, function (k, mapping) {
    $(mapping.from).dblclick(getDblClickHandler(mapping.to));
});

Answer 3

尝试

        $(".nav li")
        .on("dblclick", function (e) {
            $("span", this).hide()
                .siblings(".edit").show()
                .val($("span", this).text())
                .focus();
            return $(e.currentTarget.nodeName).each(function (i, el) {
                $(el).not($(e.currentTarget)).find("span").show()
                    .siblings(".edit").hide()
            })
        });

jsfiddle http://jsfiddle.net/guest271314/LX8c4/

对同一事件具有相同的功能但不同的对象jquery

3 个答案: