Функция привязки к нескольким элементам с помощью Jquery - PullRequest
Новая
       29

Функция привязки к нескольким элементам с помощью Jquery

9 голосов
/ 15 мая 2009

У меня есть небольшая проблема с 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 # a вы получали предупреждение «Link a», «Link b» на div # b и так далее ... Проблема в том, что если вы запустите этот код, щелкнув по каждому элементу, вы получите предупреждение («Ссылка c»), в результате, кажется, что только последний вариант функции назначен каждому div ...

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

Спасибо заранее ...

Ответы [ 9 ]

32 голосов
/ 12 января 2010

замечательная вещь в jQuery - она ​​позволяет связывать и связывать несколько элементов, как css. 

$(document).ready(function(){

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

});
6 голосов
/ 15 мая 2009

Я верю, что вы ищете: 

$(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) })
    })
});
4 голосов
/ 15 мая 2009

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

$(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)
        );
    };
});
2 голосов
/ 20 июля 2013

Рабочая демоверсия http://jsfiddle.net/FWcHv/

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

В моем коде я прошел все идентификаторы с использованием $ .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());
        });
    }
});
1 голос
/ 15 мая 2009 
<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 />
0 голосов
/ 08 декабря 2011

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

$(window).load(function(){

});

:)

0 голосов
/ 15 мая 2009

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

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

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

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!");
    });
0 голосов
/ 15 мая 2009 
<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 />
0 голосов
/ 15 мая 2009

Вам нужно использовать «это». 

$(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!");
        });
    }
});
...