![](/img/trans.png)
[英]How to make one element disappear after you made another one appear using javascript. triggered by scrolling?
[英]How to make in javascript that <a> element disappear after you click on link?
我有这个代码,当用户点击显示评论时,会显示带注释的div。 问题是,点击后显示评论会保持显示状态。
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container' style='display: none;'>
comment 1: ...
comment 2: ...
</div>
<a class='show-comments'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
</script>
</body>
</html>
点击链接后如何在javascript中使元素消失? 像这样的东西:
<a class='show-comments' style='display: none;'>Show Comments</a>
或者更好的是,如何将“显示注释”更改为“隐藏注释”,当您单击“隐藏注释”时,将隐藏注释(带有注释的div再次设置为dispay:none),并再次显示“显示注释”。 也许用两个元素可以更容易地创建:
<a class='show-comments'>Show Comments</a>
<a class='hide-comments' style='display: none;'>Hide Comments</a>
改变为
<a class='show-comments' style='display: none;'>Show Comments</a>
<a class='hide-comments'>Hide Comments</a>
如果有更好的方法使用除javascript之外的其他语言,请随时编写它。
你应该将jQuery包装在.ready函数中,如下所示:
$(document).ready(function() {
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
});
这应该工作。
要回答你的其余问题:
对于这两个操作,您可以使用相同的元素作为链接。
$(document).ready(function() {
$(".show-comments").on('click', function(){
$(this).removeClass().html('Hide Comments').addClass('hide-comments');
$(".comments-container").slideDown("slow");
});
$(".hide-comments").on('click', function(){
$(this).removeClass().html('Show Comments').addClass('show-comments');
$(".comments-container").slideUp("slow");
});
});
注意:我使用.on()方法将事件处理程序附加到jQuery对象中的元素。
我知道这是一个老帖子,但我发现了一些非常简单的事情。
<a class='show-comments' onClick="$(this).hide()">Show Comments</a>
希望它帮助像我这样试图找到它的人。
像这样的东西:
$(document).ready(function() {
$(".show-comments").click(function(){
var oThisLink = jQuery(this);
oThisLink.toggleClass('someclassname');
if( oThisLink.hasClass('someclassname') ) {
oThisLink.text('Hide Comments');
jQuery(".comments-container").slideDown("slow");
}
else {
oThisLink.text('Show Comments');
jQuery(".comments-container").slideUp("slow");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.