La función de enlace a varios elementos con Jquery

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

  •  22-08-2019
  •  | 
  •  

Pregunta

Tengo este pequeño problema con jquery:Necesito hacer algo como esto:

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

De modo que cuando usted haga clic en el div#un obtendrá "Enlace de una" alerta, Enlace "b" en el div#b y así sucesivamente...El problema es que si se ejecuta este código, haga clic en cada elemento le dará la alerta (Enlace"c"), como resultado, parece que sólo la última función de la variación se asigna a cada div...

Por supuesto que puede hackear por la edición de la función para trabajar con div id y el uso de $(this), pero para cursiosity:hay una manera de hacer este ciclo de trabajo?Por crear y asignar una nueva función a cada elemento de la función?

Thx de antemano...

¿Fue útil?

Solución

Utilice un cierre: (a "esta" solución es más elegante, pero les dejo esto porque una respuesta ahora eliminada tenía una solución de cierre que no funcionó) 

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

Otros consejos

Lo bueno de jQuery es que permite encadenar y se liga varios elementos como CSS. 

$(document).ready(function(){

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

});

Creo que esto es lo que está buscando: 

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

Demo http://jsfiddle.net/FWcHv/

en el código que está llamando jQuery constructor muchas veces yo.e $('#a') de $('#b') y $('#c') en lugar usted debe llamar como $('#a,#b,#c')

En mi código me han pasado a través de todos los id usando $.cada uno de los y las ha combinado y en el siguiente paso que he utilizado $('#a,#b,#c') almacenados en la variable x para hacer que el código optimizado y fácil.

también he hecho una comprobación de que si links{} está vacía no procesará el uso de la variable 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());
        });
    }
});

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

Es necesario utilizar "este". 

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

En vista de que usted está codificando los elementos de efectuarse de todos modos, que también podría hacerlo de esta manera, ya que es probable que más rápido y es más limpio, IMO: 

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

Editar no vi la última parte de su pregunta ... Lo siento. También puede hacer esto: 

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

Trate de usar: 

$(window).load(function(){

});

:)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top