在jQuery中的两个类之间切换

发布时间:2020-01-19 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了在jQuery中的两个类之间切换大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图修改的图标为 jQuery UI portlets.而不是有一个加到最小化和减去扩展,我想切换他们。

我只有有限的成功,它第一次点击减去它翻转到一个加号,但加号从不翻转到减号。任何帮助,这将是非常感激。

下面是一个HTML示例:

<script src="scripts/jquery-1.3.2.js" type="text/javascript" ></script>
<script src="scripts/ui/ui.core.js" type="text/javascript"></script>
<script src="scripts/ui/ui.sortable.js" type="text/javascript"></script>

<div class="column">
    <div class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet,consectetuer adipiscing elit</div>
    </div>
</div>

这是我想出的jQuery:

<script type="text/javascript">
    $(function() {
        $(".column").sortable({
            connectWith: '.column'
        });

        $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
            .addClass("ui-widget-header ui-corner-all")
            .prepend('<span class="ui-icon ui-icon-minusthick"></span>')
            .prepend('<span class="ui-icon ui-icon-closethick"></span>')
            .end()
        .find(".portlet-content");

        $(".portlet-header .ui-icon-minusthick").click(function() {
            $(this).removeClass("ui-icon-minusthick");
            $(this).addClass("ui-icon-plusthick");
            $(this).parents(".portlet:first").find(".portlet-content").toggle();
        });

        $(".portlet-header .ui-icon-plusthick").click(function() {
            $(this).removeClass("ui-icon-plusthick");
            $(this).addClass("ui-icon-minusthick");
            $(this).parents(".portlet:first").find(".portlet-content").toggle();
        });

        $(".portlet-header .ui-icon-closethick").click(function() {
            $(this).parents(".portlet:first").toggle();
        });

        $(".column").disableSelection();
    });
</script>

编辑:这是jQuery UI demo网站的原始javascript:

<script type="text/javascript">
$(function() {
    $(".column").sortable({
        connectWith: '.column'
    });

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
            .addClass("ui-widget-header ui-corner-all")
            .prepend('<span class="ui-icon ui-icon-plusthick"></span>')
            .end()
        .find(".portlet-content");

    $(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

    $(".column").disableSelection();
});
</script>

我不知道他们是如何得到加号和减号正确切换。

解决方法

这可能是因为当你绑定这些函数没有结果$(“。portlet-header .ui-icon-plusthick”)。它没有找到它。您可以将此绑定添加到$(“。portlet-header .ui-icon-minusthick”)。添加“ui-icon-plusthick”类后,单击(function(){…。

编辑:
备选解决方案可以是:

$(".portlet-header .ui-icon-minusthick").toggle(function() {
        $(this).removeClass("ui-icon-minusthick");
        $(this).addClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    },function() {
        $(this).removeClass("ui-icon-plusthick");
        $(this).addClass("ui-icon-minusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

所以第一次点击将是第一个功能,第二次点击将是第二个功能。

大佬总结

以上是大佬教程为你收集整理的在jQuery中的两个类之间切换全部内容,希望文章能够帮你解决在jQuery中的两个类之间切换所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。