Блог

Главная - Вопросы по программированию - Наличие одинаковой функции для одного и того же события, но разных объектов jquery

Наличие одинаковой функции для одного и того же события, но разных объектов jquery

#javascript #jquery #html #twitter-bootstrap

#javascript #jquery #HTML #twitter-bootstrap

Вопрос:

Я создаю динамически LI с помощью jquery.

У меня есть этот jquery для изменения имен li. Я не хочу создавать новую функцию с идентификатором li для выполнения этого. Я не считаю это лучшим способом сделать это. Если я добавлю 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());
 });

Ответ №1:

Я добавил класс edit_text к каждому диапазону. Затем, как только вы дважды щелкните по нему, он автоматически найдет текстовое поле и покажет его.

Я почти уверен, что это то, что вы хотите: http://jsfiddle.net/dXX9G/3 /

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

Ответ №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));
});

Комментарии:

1. Но если я начну создавать больше li, мне придется добавить больше $ («#fTab»).dblclick(getDblClickHandler(‘tabG1’)); Так что это означает, что у меня будет та же проблема.

2. Я не знаю точно, какую проблему вы имеете в виду, но в моей второй версии вам нужно добавить только одну строку на li.

Ответ №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 /