Question

我有以下代码：

    $('.edu2').click(function() {
        $('.edusub2').toggle().delay( 2000 );
    });
    $('.edu3').click(function() {
        $('.edusub3').toggle().delay( 2000 );
    });
    $('.edu4').click(function() {
        $('.edusub4').toggle().delay( 2000 );
    });
    $('.edu5').click(function() {
        $('.edusub5').toggle().delay( 2000 );
    });
    $('.edu6').click(function() {
        $('.edusub6').toggle().delay( 2000 );
    });

可以在单个函数中创建它们，而不是具有六个不同的函数，即循环：

我尝试了以下内容：

    for (i = 2; i <= 6; i++) {
        $('.edu'+i).click(function() {
            $('.edusub'+i).toggle().delay( 2000 );
        });
    }

HTML

<tr class='td1 noborder pointer education'><td  style='padding-left:10px'><b> + </b>ISCS</td>
<td style='text-align:center;'>0</td><tr class='td1 noborder pointer edu2'>
<td  style='padding-left:20px;background-color:#CCC;'><b> + </b>Cis</td>
<td style='text-align:center;background-color:#CCC;'>0</td>
<tr class='td1 noborder edusub2'>
<td  style='padding-left:30px;background-color:#DDD;'><b> - </b>DM 5</td>
<td style='text-align:center;background-color:#DDD;'>0</td>
<tr class='td1 noborder pointer edu3'>
<td  style='padding-left:20px;background-color:#CCC;'><b> + </b>CRF</td>
<td style='text-align:center;background-color:#CCC;'>0</td>
<tr class='td1 noborder edusub3'>

等

但没有快乐。欢迎任何建议。

Answer 1

事实证明，使用for loop并不是最佳解决方案。这是因为索引变量的值增加了。最好使用jQuery的each函数。这是一个例子。

$("button").each(function() {
    $(this).on("click", function() {
        $(".edusub" + ($(this).index() + 2)).toggle();
    });
});

http://jsfiddle.net/by6pu11k/1/

免责声明：我不知道您的代码是什么样的，但我知道您提到了表格行。我试图根据您提供给我们的信息创建此示例。在本例中，我创建了5个按钮，其中包含.edu类和5个表行。

Answer 2

您可以通过以下方式轻松实现这一目标：（1）为元素提供一个共同的类，比如edu和（2）为每个元素添加一个data-attribute，比如data-target将保存目标元素的元素。然后你的代码看起来像：

$('.edu').click(function() {
    var target = $(this).data('target');
    $(target).toggle().delay( 2000 );
});

示例html

.... class="edu1 edu" data-target=".edusub1" ....

jQuery在循环中创建函数

2 个答案: