javascript - 组合 Javascript 块

Question

我远非 Javascript 专家，而且是自学成才的，我认为这可能是 Javascript 101，但我一定错过了这一课。

我想出了以下代码，当我单击其中的行时（因此每隔一行），表中会出现 7 行。我知道它并不整洁，但我对自己很满意，它实际上在离线预览中工作。但是，当我上传我的网站时，默认情况下会显示所有行，我必须单击上面的行才能使它们消失。默认情况下，它们应该全部隐藏。

谢谢

这是代码：

<script>
$('.openRow1').click(function(){
    $('.hiddenRow1').toggle();
})
</script>

<script>
$('.openRow2').click(function(){
    $('.hiddenRow2').toggle();
})
</script>

<script>
$('.openRow3').click(function(){
    $('.hiddenRow3').toggle();
})
</script>

<script>
$('.openRow4').click(function(){
    $('.hiddenRow4').toggle();
})
</script>

<script>
$('.openRow5').click(function(){
    $('.hiddenRow5').toggle();
})
</script>

<script>
$('.openRow6').click(function(){
    $('.hiddenRow6').toggle();
})
</script>

<script>
$('.openRow7').click(function(){
    $('.hiddenRow7').toggle();
})
</script>

Answer 1

这是一个更好的方法：http: //jsfiddle.net/8fwdf/

DOM：

<div class="openRow">Open</div>
<div class="hiddenRow">Hidden</div>
<div class="openRow">Open</div>
<div class="hiddenRow">Hidden</div>
...

JS：

$('.hiddenRow').hide();
$('.openRow').click(function(){
    $(this).next('.hiddenRow').toggle();
})

您不需要为每个人单独绑定。您可以使用 jquery 选择器选择并在所有元素上应用单个绑定。我在此示例中使用了 div，但您可以将相同的内容应用于其他元素类型。

请注意，我不知道您的 DOM 是什么样子，因此$(this).next()可能需要调整该部分。也许你可以弄清楚那部分，或者发布你的 DOM，我可以更新。

此外，您可以执行此 css 并删除该hide()行：

.hiddenRow {
    display: none;
}

Answer 2

你可以这样做：

  <script>
for(var i=1; i<=7; i++) {
    $('.openRow'+i).click(function(){
        $('.hiddenRow'+i).toggle();
    }).css('visibility', 'hidden'); //this will make them invisible, but
}                                   //the elements will still take up that 
                                    //same amount of space. to completely remove
                                    //use *.css('display', 'none');

</script>

jQuery 是 DOM 中数据的实时表示，因此无论何时更改 jQuery 元素，网页都会随之更改。

Answer 3

为了使这段代码更整洁，您可以将其替换为：

<script>
for(var i=1; i<=7; i++) {
    $('.openRow'+i).click(function(){
        $('.hiddenRow'+i).toggle();
    });
}
</script>