javascript - 使我的 js 代码适应输入

Question

我有这个创建 slider 的 javascript 代码:

http://jsfiddle.net/samccone/ZMkkd/

现在，我想在复选框输入上使用此代码。问题是代码创建了一个子元素，该子元素使用 css 位置在其父元素中滑动，并且输入不能有子元素。

我的想法是使用 background-position 并使用 css 从左向右滑动输入的背景，而不是使用真正的定位。

我该如何调整这个脚本？我认为这很容易，但经过几次尝试后我就放弃了，我还不够好:)。

谢谢你的帮助，

克里斯托弗

Answer 1

信不信由你，不用 JavaScript 就可以为复选框创建切换效果。

如果您在复选框后面加上标签:

<input type="checkbox" id="jim" />
<label for="jim"></label>

你会发现你可以用next sibling selector选择标签:

input + label { /* some CSS */ }

为什么有用？因为使用伪选择器 :checked 你现在可以根据复选框的状态设置标签的样式:

input + label { background-position: 0 0; }
input:checked + label { background-position: 100% 0; }

显然，由于 for="jim"属性，单击标签将更改复选框的状态。因此，如果您隐藏复选框，您最终会得到一个样式化的、可点击的标签。

input { display: none; }

当然，标签可以有子标签，这样您就可以随心所欲地重新设计开关。并且你应该小心地包括 :focus 样式，对于那些选择你的复选框而不是点击它的人。

对于不支持 :checked 伪类的浏览器(IE8 及以下)，使用全局处理程序和“checked”类很容易模拟。像这样的东西:

jQuery(document).bind('change', function(e){
  var elem = jQuery(e.target);

  // If this is not a checkox, do nothing.
  if (elem.attr('type') !== 'checkbox') { return; }

  // Add or remove checked class based on current state.
  if (elem.attr('checked')) { elem.removeClass('checked'); }
  else { elem.addClass('checked'); }
});

...应该这样做。