在jQuery中切换两个类之间的转换

Question

在jQuery中切换两个类之间的转换

30

我正在尝试修改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演示网站的原始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>

我不确定他们是如何成功正确地切换加号和减号的。

- CAbbott

我认为jQuery演示起作用是因为当添加ui-icon-minusthick时，它会覆盖ui-icon-plusthick属性。第一次单击它时，应该具有两个类。 - Marek Tihkan

2

你有更简单的方法！ - elciospy

请更新最佳答案。 - another

5个回答

47

您可以尝试以下代码。

$(this).toggleClass('ui-icon-plusthick ui-icon-minusthick');

- George

3

我相信这是最佳答案。 - Pardoner

@Pardoner 这个方法奇怪地有效。然而，jQuery文档指出应用 $('.tumble').toggleClass('bounce spin') 会在 <div class="tumble bounce spin"> 和 <div class="tumble"> 之间切换。但实际上它似乎在 <div class="tumble bounce"> 和 <div class="tumble spin"> 之间切换。 - JayAr

1

我没有看到那种行为... http://jsfiddle.net/4kDaR/30/ 不同之处在于，在该帖子的请求中，被切换的元素以其中一个类开始。切换命令将其关闭，并打开第二个，因为之前是关闭状态。从而交替两者。要获得您在最后描述的行为，请参见此处... http://jsfiddle.net/4kDaR/34/ - George

6

可能是因为在绑定这些函数时，没有找到$(".portlet-header .ui-icon-plusthick")的结果。您可以将此绑定添加到$(".portlet-header .ui-icon-minusthick").click(function() { ...中，在添加"ui-icon-plusthick"类后。

编辑: 另一种解决方案可能是:

$(".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();
    });

第一次点击将执行第一个函数，第二次点击将执行第二个函数。

- Marek Tihkan

我理解你的意思，但我无法使它正常工作。我在addClass('ui-icon-plusthick')上添加了*.click(function() {...*，但这似乎使它不稳定。您能否提供一个示例说明您的意思？ - CAbbott

太好了！谢谢，这个问题困扰我有一段时间了。顺便说一下，你的例子需要是$(".portlet-header .ui-icon-minusthick").toggle(...)。 - CAbbott

.toggle() (event)现已过时，请参考http://api.jquery.com/toggle-event/，并参考https://dev59.com/72Yq5IYBdhLWcg3wpyRE如果您仍想使用此选项，这是一个非常好的和干净的选项https://dev59.com/72Yq5IYBdhLWcg3wpyRE#answer-25150375。 - Facundo Colombier

0

我编写了这个jQuery函数（不是插件），用于循环播放任意数量的类。其中两个类别就像是一个开关。只需要将您的类名CSV放置在元素的data-classes中，然后使用$(selector).cycleClass()循环播放它即可。

在www.PluginExamples.com/draggable上看到其使用，选择draggable-axis。

(function($){
    $.fn.cycleClass = function(){
        if( !$(this).data("aClasses") ){
            var classes = $(this).attr("data-classes").split(",");
            $(this).data("aClasses", classes);
            $(this).data("classes", classes.join(" "));
            $(this).data("class", classes.length);
        }
        $(this).data("class",($(this).data("class")+1) % $(this).data("aClasses").length);
        $(this).removeClass($(this).data("classes"))
            .addClass( $(this).data("aClasses")[$(this).data("class")] );
        return $(this);
    }
});

- Richard Taylor-Kenny

-2

不要再用那么多的Javascript了，为什么不直接修改ui-icon-plusthick CSS类，将加号图标替换成减号图标呢？

- Rahil Sondhi

你能否举一个例子，说明如何在类中切换这两张图片？ - CAbbott

事实上，仔细考虑后，这不会起作用。我不希望站点上未最小化的其他门户网站更改它们的图像。 - CAbbott

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bongs · Accepted Answer

如何呢？

$(YOUR_ELEMENT).live("EVENT_NAME", function() {
    $(".portlet-header").toggleClass("ui-icon-plus").toggleClass("ui-icon-minus");
});

更加简短

$(YOUR_ELEMENT).live("EVENT_NAME", function() {
    $(".portlet-header").toggleClass("ui-icon-plus ui-icon-minus");
});

编辑

从 jQuery 1.7 开始，.live() 方法已被弃用。使用 .on() 来添加事件处理程序。旧版本的 jQuery 用户应该优先使用 .delegate() 替代 .live()。

jQuery API 参考文档