组合Javascript块
我远非Javascript方面的专家,而且是自学成才的,我认为这可能是Javascript 101,但我一定错过了这一课 我想出了下面的代码,当我单击表中的行时,表中的7行就会出现,所以每隔一行。我知道它不整洁,但我对自己很满意,它实际上在离线预览中起了作用。但是,当我上传我的网站时,默认情况下会显示所有行,我必须单击上面的行以使它们消失。默认情况下,它们都应该隐藏 谢谢 代码如下:组合Javascript块,javascript,jquery,dom,jquery-events,dom-manipulation,Javascript,Jquery,Dom,Jquery Events,Dom Manipulation,我远非Javascript方面的专家,而且是自学成才的,我认为这可能是Javascript 101,但我一定错过了这一课 我想出了下面的代码,当我单击表中的行时,表中的7行就会出现,所以每隔一行。我知道它不整洁,但我对自己很满意,它实际上在离线预览中起了作用。但是,当我上传我的网站时,默认情况下会显示所有行,我必须单击上面的行以使它们消失。默认情况下,它们都应该隐藏 谢谢 代码如下: <script> $('.openRow1').click(function(){ $('.
<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>
要使此代码更整洁,可以将其替换为:
<script>
for(var i=1; i<=7; i++) {
$('.openRow'+i).click(function(){
$('.hiddenRow'+i).toggle();
});
}
</script>
要使此代码更整洁,可以将其替换为:
<script>
for(var i=1; i<=7; i++) {
$('.openRow'+i).click(function(){
$('.hiddenRow'+i).toggle();
});
}
</script>
下面是一个更好的方法: DOM: 您不需要为每个人单独绑定。您可以使用jquery选择器选择并在所有元素上应用单个绑定。我在本例中使用了div,但您可以对其他元素类型应用相同的方法 请注意,我不知道您的DOM看起来是什么样子,所以$this.next部分可能需要调整。也许你可以找出那个部分,或者发布你的DOM,我可以更新 此外,您还可以执行此操作并删除隐藏线:
下面是一个更好的方法: DOM: 您不需要为每个人单独绑定。您可以使用jquery选择器选择并在所有元素上应用单个绑定。我在本例中使用了div,但您可以对其他元素类型应用相同的方法 请注意,我不知道您的DOM看起来是什么样子,所以$this.next部分可能需要调整。也许你可以找出那个部分,或者发布你的DOM,我可以更新 此外,您还可以执行此操作并删除隐藏线:
您可以这样做:
<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元素时,网页都会随之更改。您可以执行以下操作:
<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元素时,网页都会随之更改。您也应该发布任何DOM/css抱歉,我知道现在发生了什么。这与Javascript完全无关。这实际上是一个css问题。出于某种原因,当我上传CSS时,默认情况下会告诉它隐藏CSS。不过我相信这段代码可以更加高效,所以我将保留这个问题。您是否将.hiddenRow*的CSS设置为显示:none to start?使其更加高效-一件事是将其全部放在单个块中。至少它更容易阅读和编辑。我相信迈克·布兰特的评论。另外,您真的需要为这些行中的每一行创建一个唯一的类吗?您也应该发布您拥有的任何dom/css抱歉,我知道现在发生了什么。这与Javascript完全无关。这实际上是一个css问题。出于某种原因,当我上传CSS时,默认情况下会告诉它隐藏CSS。不过我相信这段代码可以更加高效,所以我将保留这个问题。您是否将.hiddenRow*的CSS设置为显示:none to start?使其更加高效-一件事是将其全部放在单个块中。至少它更容易阅读和编辑。我相信迈克·布兰特的评论。另外,您真的需要为每一行指定一个唯一的类吗?
<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>