Question

我有这个例子：

$(document).ready(function(){               
    var i = 1;
    var abrir = String('.soft-titulo-vaga a#abrir' + i);
    var fechar = String('.soft-titulo-vaga a#fechar' + i);
    var vaga = String('div#vaga' + i);

    $(abrir).click(function(){
        $(abrir).css('display', 'none');
        $(fechar).css('display', 'block');
        $(vaga).slideDown('slow');
    });
    $(fechar).click(function(){         
        $(fechar).css('display', 'none');
        $(abrir).css('display', 'block');           
        $(vaga).slideUp('slow');
    });
});

我对jquery一无所知，我看到它也使用它。每一个，但我尝试的一切都不起作用，就好像只在循环中进入一次，而且只有时间才是循环的最后一次传递。

我想要这个工作

$(document).ready(function(){               
    for(var i = 1; i < 15; i++){
        var abrir = String('.soft-titulo-vaga a#abrir' + i);
        var fechar = String('.soft-titulo-vaga a#fechar' + i);
        var vaga = String('div#vaga' + i);

        $(abrir).click(function(){
            $(abrir).css('display', 'none');
            $(fechar).css('display', 'block');
            $(vaga).slideDown('slow');
        });
        $(fechar).click(function(){
            $(fechar).css('display', 'none');
            $(abrir).css('display', 'block');           
            $(vaga).slideUp('slow');
        });
    }
});

Answer 1

循环工作正常。你也可以这样做。缓存DOM元素是加速代码的更好方法：

$(document).ready(function() {
    for (var i = 1; i < 15; i++) {
        var abrir = $('.soft-titulo-vaga a#abrir' + i);
        var fechar = $('.soft-titulo-vaga a#fechar' + i);
        var vaga = $('div#vaga' + i);
        abrir.click(function() {
            abrir.css('display', 'none');
            fechar.css('display', 'block');
            vaga.slideDown('slow');
        });
        fechar.click(function() {
            fechar.css('display', 'none');
            abrir.css('display', 'block');
            vaga.slideUp('slow');
        });
        console.log(i);
    }
});

Answer 2

您可以通过删除循环并使用类和data-attribute来重新考虑代码。

通过这种方式，您可以使用两个选择器绑定操作，并使用data-id属性作为元素之间的链接点。

HTML：

<div class="soft-titulo-vaga"> 
    <a class="abrir" data-id="1">abrir demo 1</a>
    <a class="fechar" data-id="1">fechar demo 1</a>
    <div class="vaga" data-id="1">vaga demo 1</div>

    <a class="abrir" data-id="2">abrir demo 2</a>
    <a class="fechar" data-id="2">fechar demo 2</a>
    <div class="vaga" data-id="2">vaga demo 2</div>
</div>

代码：

$(document).ready(function () {
    $('.abrir').click(function () {
        $(this).hide();
        $('.fechar[data-id=' + $(this).attr("data-id")+']').show();
        $('.vaga[data-id=' + $(this).attr("data-id")+']').slideDown('slow');
    });
    $('.fechar').click(function () {
        $(this).hide();
        $('.abrir[data-id=' + $(this).attr("data-id")+']').show();
        $('.vaga[data-id=' + $(this).attr("data-id")+']').slideUp('slow');
    });
});

演示：http://jsfiddle.net/IrvinDominin/DCJFr/

一个循环如何运作？

2 个答案: