Toggle and re-Toggle class on Click to make pretty Checkbox
这似乎是我不应该浪费一个问题的东西，但我无法让它发挥作用！
我正在尝试使用带有背景图标和隐藏复选框的
我的 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 规则(
更好的是，您可以只使用一个标记所有”漂亮”复选框的类，然后使用另一个修改默认样式的类。
可能是这样的：
CSS
|
1
2 |
.pretty-checkbox { /* default style rules */ }
.pretty-checkbox.checked { /* style rules when 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’);
|
你已经列出了两次
这可能更容易阅读，或者您可以合并对
|
1
|
$(this).toggleClass(‘checkedBox unCheckedBox’);
|
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/268736.html