Question

我使用非常简单的功能在点击时隐藏整个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>

任何建议或帮助都是高度评价的

Answer 1

我倾向于把＆＃34;点击这里......＆＃34;要显示和隐藏在自己的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() method添加或删除指定的类，具体取决于它们是否已存在;它可以同时添加和删除，因此无需手动编写if测试以查看当前类是什么。

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

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

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

Answer 2

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

编辑：

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

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

使用Jquery函数隐藏/显示div并更改span中的类

2 个答案: