关于 jquery:Toggle and re-Toggle class on Click to make pretty Checkbox

Toggle and re-Toggle class on Click to make pretty Checkbox

这似乎是我不应该浪费一个问题的东西,但我无法让它发挥作用!

我正在尝试使用带有背景图标和隐藏复选框的 <span> 制作一个漂亮的复选框。

我的 HTML 是

1
2
<span class="checkedBox" id="mailing_Check"></span>
<input type="checkbox" id="mailing" /> <!–(currently not hidden for testing)–>

CSS 很简单:

1
2
.checkedBox { background: url(‘../images/iconLine.png’); background-position: -550px, 0px; display: inline-block; width: 25px; height: 25px }
.unCheckedBox { background: url(‘../images/iconLine.png’); background-position: -575px, 0px; display: inline-block; width: 25px; height: 25px }

我需要将 onClick 处理程序绑定到 checkedBox 项,将类切换/翻转为 unCheckedBox 并将复选框设置为选中。

现在,我有各种冗长的方法来做到这一点,但我试图使用 jQuery toggle 或 toggleClass 来做到这一点,但我无法让它正常工作。

现在只是在翻转 CSS 类…

1
2
3
$(‘.checkedBox, unCheckedBox’).live(‘click’, function () {
    $(this).toggleClass(‘checkedBox’).toggleClass(‘checkedBox’);
});

这样会翻转一次,但是没有正确绑定,当我点击第二次时,它没有效果。

我试过用这个例子; jQuery 切换类

但这似乎并不想工作,还有其他各种谷歌搜索结果,但由于某种原因我很挣扎。

我想使用变量的最低要求将代码保持在最低限度,就像我说的,我有一些使用 if/else 逻辑的冗长方法,但我认为 jQuery 应该让它更容易! :)


由于您在两条 CSS 规则(.checkedBox.unCheckedBox)上修改完全相同的 CSS 样式属性,我想您不必切换 .checkedBox 类,因为另一个只是覆盖它。

更好的是,您可以只使用一个标记所有”漂亮”复选框的类,然后使用另一个修改默认样式的类。

可能是这样的:

CSS

1
2
.pretty-checkbox { /* default style rules */ }
.pretty-checkbox.checked { /* style rules when checked */ }

然后你就可以放心切换 .checked 类了。

1
2
3
$(‘.pretty-checkbox’).live(‘click’, function (e) {
    $(this).toggleClass(‘checked’);
});


你试过了吗

1
2
3
4
$(‘.checkedBox, .unCheckedBox’).live(‘click’, function () {
    $(this).toggleClass(‘checkedBox unCheckedBox’);//toggle the class
    $(this).next().click();//click the checkbox
});

在这里提琴 http://jsfiddle.net/3uu2M/


你打错了

1
  $(this).toggleClass(‘checkedBox’).toggleClass(‘unCheckedBox’);

你已经列出了两次 checkedBox

这可能更容易阅读,或者您可以合并对 toggleClass() 的调用并用空格分隔。

1
  $(this).toggleClass(‘checkedBox unCheckedBox’);

.toggleClass()


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268736.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论