0

我使用非常简单的功能在单击时隐藏整个 div 并显示评论块。

我需要做的不是隐藏整个div，而是在单击时保持原样，显示注释块，但是将跨度中的类从class =“icon expand”更改为class =“icon abate”并仅隐藏“单击在这里发表评论或查看我们的客户在说什么。” 行，以便如果再次单击它会做相反的事情。

这是我的脚本

function myfunc_showComments() {
    if ( typeof jQuery != 'undefined' ) {
        $('#hidecomments').remove();
    }
var commentsParams ={
categoryID: 'Widgets',
streamID: '<?php echo $streamID ?>',
containerID: 'commentsDiv',
}
gigya.services.socialize.showCommentsUI(conf,commentsParams);
}
</script>
<!-- end #review --></div>
<div id="hidecomments">
<div class="button_3" onClick="myfunc_showComments()"><span class="icon expand"></span><h2>Comment &amp; Rate this <span><?php echo $widget_title ?></span></h2><br />Click here to leave a comment or view what our customers are saying.
</div>
</div>

任何建议或帮助都非常受欢迎

4

2 回答 2

1

我倾向于将您想要显示和隐藏的“单击此处...”文本放在它自己的 div 中：

<div id="hidecomments">
    <div class="button_3"><span class="icon expand"></span>
        <h2>Comment &amp; Rate this <span><?php echo $widget_title ?></span></h2>
        <br />
        <div class="instruction">
             Click here to leave a comment or view what our customers are saying.</div>
    </div>
</div>

...这样更容易从您的 JavaScript 代码中进行操作。请注意，我还删除了内联onClick="myfunc_showComments()"部分，因为您可以直接从脚本中绑定处理程序，如下所示：

$(document).ready(function() {

    $(".button_3").click(function() {
        var $this = $(this);
        $this.find("span.icon").toggleClass("expand abate");
        $this.find("div.instruction").slideToggle();
    });

});

该.toggleClass()方法根据它们是否已经存在来添加或删除指定的类；它可以同时添加和删除，因此无需手动编写 if 测试来查看当前类是什么。

该.slideToggle()方法只是隐藏可见元素或显示不可见元素的几个选项之一。其他选项包括.toggle()或.fadeToggle()。

工作演示：http: //jsfiddle.net/cRjCN/

请注意，如果脚本出现在相关元素之后，则不需要文档就绪包装器。

于 2013-07-17T11:00:31.537 回答
0

使用jQuery prop这样做$(yourselector).prop('class','icon abate')；

编辑：

$(".button_3").click(function(e) {
    $("span.icon.expand").prop('class','icon abate');
});

只需在<script>htmlbody标签内的标签内添加上面的代码块。最好在结束</body>标签之前。

于 2013-07-17T10:29:34.207 回答