jQuery 块未运行

发布于 2024-12-06 07:23:54 字数 1572 浏览 0 评论 0原文

我下面有以下 jquery。当用户点击 .commentCount 时，我希望打开这个名为 #commentSec 的 div，然后网站上的其他一些元素会发生变化。这个 jquery 块运行良好。

然而，第二个块，即名为 .closeComments 的关闭按钮的 onclick，根本不运行。我做错了什么？我必须在第一个 jquery 部分返回 true 或其他内容吗？

 $('.commentCount').click( function() {
        $('#commentSec').css({ 'display' : 'inline', 'height' : 'auto', 'padding' : '10px', 'padding-bottom' : '0px', 'margin-bottom' : '10px', 'margin-left' : '10px', 'z-index' : '10'});
        $('#commentSec h3').css({ 'display' : 'block'});
        $('#rightcolumn').css({ 'opacity' : '.3'}); //Transparent rightcolumn
    });

第二块：

$('.closeComments').click( function() {
    $('#commentSec').css({ 'display' : 'none'});
    $(this).css({'opacity' : '.9'});
    $('#rightcolumn').css({ 'opacity' : '1'}); //Undo transparent rightcolumn
});

HTML/PHP：

<h3><b>' . $useranswering . '\'s</b> ANSWER</h3><img class="closeComments" src="../Images/bigclose.png" alt="close"/>
    <span><a class="prev" >&larr; previous answer</a><a class="next" href="">next answer &rarr;</a></span>
    <div>
    <p>' . $answer . '</p>
    <form method=post>
            <input type="hidden" value="'. $ansid .'" name="answerid">
            <textarea rows="2" cols="33" name="answercomment">Comment on this answer</textarea>

            <input type="image" src="../Images/commentSubmit.png"/>

原文

I have the following jquery below. When the user clicks .commentCount, I want this div called #commentSec to open up, and then some other elements on the site change. This jquery chunk runs fine.

However, the second chunk, onclick of a close button called .closeComments, doesn't run at all. What am I doing wrong? Do I have to return true or something in the first jquery section?

 $('.commentCount').click( function() {
        $('#commentSec').css({ 'display' : 'inline', 'height' : 'auto', 'padding' : '10px', 'padding-bottom' : '0px', 'margin-bottom' : '10px', 'margin-left' : '10px', 'z-index' : '10'});
        $('#commentSec h3').css({ 'display' : 'block'});
        $('#rightcolumn').css({ 'opacity' : '.3'}); //Transparent rightcolumn
    });

Second Chunk:

$('.closeComments').click( function() {
    $('#commentSec').css({ 'display' : 'none'});
    $(this).css({'opacity' : '.9'});
    $('#rightcolumn').css({ 'opacity' : '1'}); //Undo transparent rightcolumn
});

HTML/PHP:

<h3><b>' . $useranswering . '\'s</b> ANSWER</h3><img class="closeComments" src="../Images/bigclose.png" alt="close"/>
    <span><a class="prev" >← previous answer</a><a class="next" href="">next answer →</a></span>
    <div>
    <p>' . $answer . '</p>
    <form method=post>
            <input type="hidden" value="'. $ansid .'" name="answerid">
            <textarea rows="2" cols="33" name="answercomment">Comment on this answer</textarea>

            <input type="image" src="../Images/commentSubmit.png"/>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尾戒 2024-12-13 07:23:54

我想到的唯一问题是，您可能有多个 [XX comments] 链接，并且

现在有多个 [commentsSec]，您只能拥有一个具有一个 ID 的块。这是完美运行的示例：

<style>
    .comment { display: none;}
</style>
<div class="comment-container"><span class="open-comment">[xx comments]<
    <div class="comment">Lorem Ipsum<span class="close-comment">[close]<
</div>
<div class="comment-container"><span class="open-comment">[xx comments]<
    <div class="comment">Lorem Ipsum<span class="close-comment">[close]<
</div>
<script>
    $(document).ready(function(){
        $(".open-comment").click(function(){
            $(this).parent().find(".comment").show({duration: 1000});
        });
        $(".close-comment").click(function(){
            $(this).parent().hide({duration: 1000});
        });
    });
</script>

only issue that comes to my mind is that probably you might have multiple [XX comments] links, and having multiple [commentsSec]

now, you can only have one block with one ID. here is perfectly working example:

<style>
    .comment { display: none;}
</style>
<div class="comment-container"><span class="open-comment">[xx comments]<
    <div class="comment">Lorem Ipsum<span class="close-comment">[close]<
</div>
<div class="comment-container"><span class="open-comment">[xx comments]<
    <div class="comment">Lorem Ipsum<span class="close-comment">[close]<
</div>
<script>
    $(document).ready(function(){
        $(".open-comment").click(function(){
            $(this).parent().find(".comment").show({duration: 1000});
        });
        $(".close-comment").click(function(){
            $(this).parent().hide({duration: 1000});
        });
    });
</script>

回复收藏 0 原文

~没有更多了~