función de unión a múltiples elementos con jQuery

tengo este pequeño problema con jQuery: Necesito hacer algo como esto:función de unión a múltiples elementos con 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 />

Así que cuando se hace clic en div # a obtendrá "Enlace" alerta , "Enlace b" en div # b y así sucesivamente ... El problema es que si ejecuta este código, al hacer clic en cada elemento dará alerta ("Enlace c") como resultado, parece que solo la última variación de la función se asigna a cada div ...

por supuesto que puedo entrar ilegalmente en él mediante la edición de la función de trabajar con el id del div y usar $ (este), pero para cursiosity: ¿hay una manera de hacer este trabajo del ciclo? ¿Creando y asignando una nueva función a cada elemento en función?

Thx por adelantado ...

Fuente

2009-05-15 Alekc

Para su información, que es un poco más ordenado si encadena su jQuery en lugar de volver a seleccionar el selector. * Ejemplo: * '$ ('#' + x) .css ('border', '1px solid # 000'). Click (fn);' –

Uso de un cierre: (a "esta" solución es más elegante, pero Quiero poner 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) 
     ); 
    }; 
});

Fuente

2009-05-15 14:49:58

Gracias, esto era lo que estaba buscando :) – Alekc

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

Fuente

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

Fuente

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

Fuente

2009-05-15 14:56:58

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

Fuente

2009-05-15 15:02:46 duckyflip

IMO esta es la única respuesta de sonido que no sea la aceptada. Al usar cada método de jQuery está creando un cierre en la ejecución; para cada vez que se ejecuta la función. ¡Buen trabajo! – James

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

Fuente

2009-05-15 15:05:19 KyleFarris

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

});

Fuente

2010-01-12 15:00:00

Trate de usar:

$(window).load(function(){ 

});

Fuente

2011-12-08 15:20:51 DatPT

Demostración de Trabajo http://jsfiddle.net/FWcHv/

en codificar la que está llamando jQuery constructor muchas veces, es decir, que $('#a')$('#b') y $('#c') lugar debe llamar como $('#a,#b,#c')

En mi código he pasado todas las identificaciones usando $ .each y las he combinado y en el siguiente paso he usado $('#a,#b,#c') almacenado en la variable x para hacer que el código sea optimizado y fácil.

También he hecho una comprobación de que si links{} está vacía no se procesa mediante 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()); 
     }); 
    } 
});

Fuente

2013-07-20 07:22:25

función de unión a múltiples elementos con jQuery

Respuesta

Cuestiones relacionadas