jQuery - 在span按钮中切换类的最佳方法

时间:2012-04-05 12:12:39

标签: jquery toggle

我有一对或多对YES - NO按钮用标签制作......确切地说:

<label id='label-btn-yes_"+button_counter+"' class='ui-button ui-button-icon-only ui-widget ui-state-default ui-btn-expand-yes_"+button_counter+" '><span id='span-btn-yes_"+button_counter+"' class='ui-button-icon-primary ui-icon ui-icon-plusthick' onClick='expandYes(this,"+row_id+")'></span><span id='span-txt-yes_"+button_counter+"' class='ui-button-text'>Button</span></label>
<label id='label-btn-no_"+button_counter+"' class='ui-button ui-button-icon-only ui-widget ui-state-default ui-btn-expand-no_"+button_counter+" '><span id='span-btn-no_"+button_counter+"' class='ui-button-icon-primary ui-icon ui-icon-plusthick' onClick='expandNo(this,"+row_id+")'></span><span id='span-txt-no_"+button_counter+"' class='ui-button-text'>Button</span></label>

我尝试像这样编码来切换按钮:

$(selector).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick").addClass("button-pressed").next().addClass("button-pressed");
if ( $(selector).attr("id") != $(node).find('.ui-icon-minusthick').attr("id") )
$(node).find('.ui-icon-minusthick').removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick").removeClass('button-pressed').next().removeClass('button-pressed');

其中$(选择器)是我当前按下的当前“按钮”,$(节点)是在按下状态下找到的按钮切换回未按下状态。

当按下的“按钮”与我按下的当前按钮不同时,它就可以了,但是效果很好,但我的问题是当我按下相同的“按钮”看起来像切换到未按下但它又回到了压迫状态......

那么有一种优雅的方法来切换SAME按钮并使其在以前处于按下状态时保持未按下状态吗?

提前感谢所有人! 再见, 路易

更新:

您可以在此链接中看到测试样本:

http://nunzioluigi.com/test/test.php

我也试过toggleClass(),但是当我在同一个按钮时,它的行为与addClass + removeClass相同......

1 个答案:

答案 0 :(得分:1)

我自己解决了......

必须颠倒代码的顺序:

if ( $(selector).attr("id") != $(node).find('.ui-icon-minusthick').attr("id") )
   $(node).find('.ui-icon-minusthick').removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick").removeClass('button-pressed').next().removeClass('button-pressed');
$(selector).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick").addClass("button-pressed").next().addClass("button-pressed");

所以现在它有效。

感谢所有人和Khôi。

侨, 路易