Binding функция для нескольких элементов с Jquery

У меня есть эта небольшая проблема с JQuery: Мне нужно сделать что-то вроде этого:Binding функция для нескольких элементов с Jquery

$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (x in links){ 
     $("#" + x).css("border","1px solid #000"); 
     $("#" + x).click(function(){ 
      alert(x); 
     }); 
    } 
}); 
</script> 
<div id="a">a</div><br /> 
<div id="b">b</div><br /> 
<div id="c">c</div><br />

Так что, когда вы нажмете на DIV # а вы получите «Ссылка на» предупреждение , «Ссылка b» на div # b и т. Д. Проблема в том, что если вы запустите этот код, нажатие на каждый элемент даст предупреждение («Ссылка c») в результате, кажется, что только последнее изменение функции присваивается каждому div ...

Конечно, я могу взломать его, отредактировав функцию для работы с id div и используя $ (this), но для усердия: есть ли способ заставить этот цикл работать? Создавая и назначая новую функцию каждому элементу в функции?

Thx заранее ...

источник

2009-05-15 Alekc

Просто FYI, это немного аккуратнее, если вы приковать ваш Jquery вместо повторного выбора селектора. * Пример: * '$ ('#' + x) .css ('border', '1px solid # 000'). Click (fn);' –

Используйте замыкание: (а «это» решение более элегантно, но я отправляю это потому, что в настоящее время удален ответ был закрывающий решение, которое не работает)

$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (var x in links){ 
     $("#" + x).css("border","1px solid #000"); 
     $("#" + x).click(
      function(xx){ 
       return function() { alert(xx) }; 
      }(x) 
     ); 
    }; 
});

источник

2009-05-15 14:49:58

Спасибо, это было то, что я искал :) – Alekc

Вы должны использовать "это".

$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (var x in links){ 
     $("#" + x).css("border","1px solid #000"); 
     $("#" + x).click(function(){ 
       alert("Link "+this.id+" Alert!"); 
     }); 
    } 
});

источник

2009-05-15 14:35:03 gradbot

<script type="text/javascript"> 
$(document).ready(function(){ 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 

    for (x in links){ 
     $("#" + x).css("border","1px solid #000").click(function(){ 
       alert($(this).attr('id')); 
     }); 
    } 
}); 
</script> 

</head> 

<body> 

<div id="a">a</div><br /> 
<div id="b">b</div><br /> 
<div id="c">c</div><br />

источник

2009-05-15 14:36:56

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.links').css("border","1px solid #000"); 
    $('.links').live('click', function() { 
     alert("Link " + $(this).attr('id')); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="a" class="links">a</div><br /> 
<div id="b" class="links">b</div><br /> 
<div id="c" class="links">c</div><br />

источник

2009-05-15 14:56:58

Я считаю, что это то, что вы после:

$(document).ready(function(){ 
    links = { 
     a:"Link a", 
     b:"Link b", 
     c:"Link c", 
    }; 

    $.each(links, function(id,text){ 
     $("#"+id) 
     .css("border","1px solid #000") 
     .click(function(){ alert(text) }) 
    }) 
});

источник

2009-05-15 15:02:46 duckyflip

IMO это единственный звуковой ответ, отличный от принятого. Используя каждый метод jQuery, вы создаете закрытие в прогоне; за каждый раз выполнение функции. Хорошая работа! – James

Видя, как вы жестко прописывать элементы, которые будут осуществляться в любом случае, вы можете также сделать это таким образом, как это, вероятно, быстрее и чище, IMO:

$("#a,#b,#c").css("border","1px solid #000"); 
$("#a,#b,#c").click(function(){ 
    alert("Link "+this.id+" Alert!"); 
});

Edit: Я не видел последнюю часть вашего вопроса ... Сожалею. Вы также можете сделать это:

var links = {}; 
links.a = "Link a"; 
links.b = "Link b"; 
links.c = "Link c"; 

var ids = ''; 
$.each(function(key,val) { 
    ids += "#"+key+","; // extra commas are ignored in jQuery 
}); 

$(ids) 
    .css("border","1px solid #000") 
    .bind('click',function(){ 
     alert("Link "+this.id+" Alert!"); 
    });

источник

2009-05-15 15:05:19 KyleFarris

хорошая вещь о JQuery это позволяет сцепление и связывание нескольких элементов, как и CSS.

$(document).ready(function(){ 

    $('#a,#b,#c') 
     .css("border","1px solid #000") 
     .bind('click',function(){ 
      // do something 
     }); 

});

источник

2010-01-12 15:00:00

Попробуйте использовать:

$(window).load(function(){ 

});

источник

2011-12-08 15:20:51 DatPT

Рабочая Демонстрационный http://jsfiddle.net/FWcHv/

в вас код, который вы вызываете JQuery конструктор много раз, то есть $('#a') чем $('#b') и $('#c') вместо этого вы должны позвонить подобные $('#a,#b,#c')

В моем коде я прошел через все ID с использованием $ .each и объединил их, и на следующем шаге я использовал $('#a,#b,#c'), хранящийся в переменной x, чтобы сделать код оптимизированным и легким.

я также сделал чек, что если links{} пустой, он не будет обрабатывать с помощью переменной i

$(document).ready(function() { 
    links = {}; 
    links.a = "Link a"; 
    links.b = "Link b"; 
    links.c = "Link c"; 
    i = 0; 
    x = ''; 
    $.each(links, function (id) { 
     x += "#" + id + ','; 
     i++; 
    }); 
    if (i > 0) { 
     $($(x.slice(0, -1))).css("border", "1px solid #000").click(function() { 
      alert($(this).text()); 
     }); 
    } 
});

источник

2013-07-20 07:22:25

Binding функция для нескольких элементов с Jquery

ответ

Смежные вопросы