0

Quiero hacer la función click dinámica para no repetir código, pero no me funciona de esta manera.

for (i = 0; i <= 11 ; i++) {
    $('#toggler_'+i).click(function () {
        $('#container-serv_'+i).slideToggle(300, function () {
        });
    });         }

Por otro lado si hago lo mismo a nivel individual si que me funciona, alguien sabría decirme cual es la diferencia?

$('#toggler_0').click(function () {
        $('#container-serv_0').slideToggle(300, function () {
        });
    });
2
  • Y no sería mejor usar una clase?
    – lromeraj
    Commented el 5 jun. 2017 a las 8:23
  • 2
    De ese modo cuando pulses puedes usar $(this) y recoger la id o el atributo que tú quieras del elemento, o añadir lo que quieras.
    – lromeraj
    Commented el 5 jun. 2017 a las 8:24

2 respuestas 2

1

tambien puedes hacer algo como esto:

$("[id^='toggler_']").on('click', function() {
    var list = $(this).attr('id').split('_');
    var i = list[1];
    $('#container-serv_'+i).slideToggle(300, function () {

    });
});

esto añadiria la funcion al evento click de todos los elementos cuyo id empiece por 'toggler_'. Dentro estoy cogiendo el id desde el valor del atributo del elemento this, para que lo utilices en el container-serv_ (ya que no sabemos como es tu html, esto quizas se podria simplificar).

Ademas, te quitarias el for...

0

Al final he añadido un parametro data-num y lo recojo con el this, el código queda así.

for (i = 0; i <= 11 ; i++) {
    $('#toggler_'+i).click(function () {
        var num = $(this).data("num");
        $('#container-serv_'+num).slideToggle(300, function () {
        });
    });
}
2
  • Para mi gusto es una mala practica.. pero si solucioaste, puedes poner tu propia respuesta como la correcta. saludos. Commented el 5 jun. 2017 a las 11:07
  • Tiene razón @Franklin'jGil'z lo que haces es llenar tu código de funciones innecesarias, usando clases es mucho mejor y más práctico!
    – lromeraj
    Commented el 5 jun. 2017 a las 12:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.