Question

我有这段代码，当用户点击显示评论时，会显示包含评论的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之外的其他语言，请随时编写。

Answer 1

您应该将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对象中的元素。

Answer 2

我知道这是一篇老文章，但我发现确实很简单。

<a class='show-comments' onClick="$(this).hide()">Show Comments</a>

希望它能帮助像我这样试图找到它的人。

Answer 3

这样的事情：

$(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");
        }
    });
});

如何在<a> element disappear after you click on link?</a>的javascript中制作

3 个答案: