Necesito hacer clic en div.toggle1, controlar el deslizamiento, deslizar hacia abajo el div#text1,

Haga clic en div.toggle7, controle el deslizamiento, deslice hacia abajo el div#text7.

Aquí está mi código, también en http://jsfiddle.net/qHY8K/ mi number +1 no trabajo, necesito ayuda. Gracias.

Html

<div class="toggle1">click</div>
<div id="text1">text1</div>
<div class="toggle7">click</div>
<div id="text7">text2</div>

Código js

jQuery(document).ready(function() {
counter = 0;
    for(i=1;i<11;i++){
        (function(i){
            counter = counter +1;
            $('.toggle'+counter).toggle(function(){
                $('#text'+counter).css('display','none');
            },
            function() {
                $('#text'+counter).css('display','block');
            });
        })(i);
    };  
});
1
cj333 13 ago. 2011 a las 11:56

4 respuestas

La mejor respuesta

Vamos a simplificar un poco las cosas. Una de las cosas buenas de jQuery es que puede aplicar un controlador de eventos a muchos elementos al mismo tiempo. Comience agregando un nombre de clase común a todos sus divs 'alternar':

Html

<div class="toggle toggle1">click</div>
<div id="text1">text1</div>
<div class="toggle toggle7">click</div>
<div id="text7">text2</div>

Ahora puede usar un solo selector para apuntar a todos esos divs. El resto es solo una cuestión de extraer la diferencia numérica en el nombre de clase de cada 'alternar' div:

Javascript

jQuery(document).ready(function() {

    $('.toggle').toggle(off, on);

    function on() {
        var i = this.className.match(/[0-9]+/)[0];
        $('#text'+i).css('display','block');
    }

    function off() {
        var i = this.className.match(/[0-9]+/)[0];
        $('#text'+i).css('display','none');
    }
});

He actualizado tu proyecto jsFiddle. Esperemos que esto funcione para usted: http://jsfiddle.net/ninjascript/qHY8K/3/

5
ninjascript 13 ago. 2011 a las 08:07

¿Por qué introduces una nueva variable counter? (debe usar var counter = 0; si lo hace).

En su función, simplemente puede usar la variable de bucle copiada i:

for(i=1;i<11;i++){
    (function(i){
        $('.toggle'+i).toggle(function(){
            $('#text'+i).css('display','none');
        },
        function() {
            $('#text'+i).css('display','block');
        });
    })(i);
}; 
1
knittl 13 ago. 2011 a las 08:16

No necesita un bucle codificado.

Preserve su HTML actual y tenga ese código jQuery en su lugar:

$("div[class^='toggle']").each(function() {
    var num = $(this).attr("class").replace("toggle", "");
    $(this).toggle(function(){
        $('#text' + num).css('display','none');
    },
    function() {
        $('#text' + num).css('display','block');
    });
});

Esto iterará sobre todos los elementos <div> con el nombre de la clase que comienza con toggle y les asignará la función toggle adecuada.

JsFiddle actualizado: http://jsfiddle.net/qHY8K/5/

2
Shadow Wizard is Ear For You 13 ago. 2011 a las 08:09

Si su HTML tiene la estructura anterior, puede dar a todos los elementos toggleX la misma clase toggle y luego todo lo que tiene que hacer es:

$('.toggle').toggle(function(){
    $(this).next().css('display','none');
},
function() {
    $(this).next().css('display','block');
});

Demo

1
Felix Kling 13 ago. 2011 a las 08:17