使用 Jquery 函数在 span 中隐藏/显示 div 和更改类答案

【问题标题】：Hide/Show div and change class in span with Jquery function使用 Jquery 函数在 span 中隐藏/显示 div 和更改类
【发布时间】：2013-07-17 10:25:22
【问题描述】：

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

我需要做的不是隐藏整个 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>

非常感谢任何建议或帮助

【问题讨论】：

标签： javascript jquery

【解决方案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() method 添加或删除指定的类取决于它们是否已经存在；它可以同时添加和删除，因此无需手动编写 if 测试来查看当前类是什么。

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

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

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

【讨论】：

好的，这已经到了它现在正在替换 span 中的类并扩展 cmets 块的地步，但现在我需要添加相反的内容，以便如果再次单击它应该返回到默认值。
其实我刚刚注意到那个特定的部分确实进入了默认状态，但是 cmets 并没有被隐藏并保持展开状态
在我的演示中，每次单击时 cmets 交替隐藏和可见。您是在谈论您在实际项目中尝试过的东西，还是...？您确实注意到我的解决方案涉及对您的 html 结构进行微小更改以将 cmets 包装在 div 中（我添加的新 div 有 class="instruction"）？
那你怎么看？
我认为自从我上次发表评论以来您没有提供任何新信息，所以我不知道您现在在问什么。

【解决方案2】：

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

编辑：

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

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

【讨论】：

在中用于更改类时，“yourselector”应该是什么？