função de ligação a múltiplos elementos com jQuery

StackOverflow https://stackoverflow.com/questions/868975

  •  22-08-2019
  •  | 
  •  

Pergunta

Eu tenho esse pequeno problema com jQuery: eu preciso fazer algo como isto: 

$(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 />

Assim que quando você clica em div # um "Link" um alerta que você obterá, "Ligação b" em div # b e assim por diante ... O problema é que, se você executar esse código, clicando em cada elemento vai dar alert ( "Fazer a ligação c") como resultado, parece que apenas a última variação função é atribuído a cada div ...

Claro que eu possa cortá-lo, editando a função de trabalhar com ID de div e usando $ (this), mas para cursiosity: existe uma maneira de fazer este trabalho ciclo? Ao criar e atribuir uma nova função para cada elemento em função?

Thx antecipadamente ...

Foi útil?

Solução

Use um encerramento de: (a "esta" solução é mais elegante, mas estou postando isso porque uma resposta agora excluídos tinha uma solução fechamento que não funcionou) 

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

Outras dicas

A coisa agradável sobre jQuery é que permite o encadeamento e vinculativa vários elementos como css. 

$(document).ready(function(){

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

});

Eu acredito que este é o que você está depois: 

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

Demonstração de Trabalho http://jsfiddle.net/FWcHv/

em seu código que você está chamando construtor jQuery muitas vezes i.e $('#a') que $('#b') e $('#c') em vez disso você deve chamar como $('#a,#b,#c')

No meu código eu ter passado por tudo de o id usando $ .each e combinou-as e na próxima etapa i ter $('#a,#b,#c') usado armazenadas em x variável para tornar o código otimizado e fácil.

Eu também fiz um cheque que se links{} é esvaziá-la não irá processar usando i variável 

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

<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 />

Você precisa usar "this". 

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

<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 />

Já que você está codificar os elementos para ser efectuada de qualquer maneira, assim como você pode fazê-lo desta forma que é provável mais rápido e é mais limpo, IMO: 

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

Editar: Não vi a última parte da sua pergunta ... Desculpe. Você também pode fazer isso: 

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

Tente usar: 

$(window).load(function(){

});

:)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top