Question

我有这个创建滑块的javascript代码：

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

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

我的想法是使用背景位置，只需使用css从左到右滑动输入的背景，而不是使用真实定位。

如何修改此脚本？我觉得很容易，但经过几次尝试后我才放弃，我不够好:)。

感谢您的帮助，

克里斯托弗

Answer 1

信不信由你，对于复选框，可以在没有JavaScript的情况下创建切换效果。

如果您使用带有标签的复选框：

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

您会发现可以使用下一个兄弟选择器选择标签：

input + label { /* some CSS */ }

为什么这有用？因为使用伪选择器：选中，您现在可以根据复选框的状态设置标签的样式：

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

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

input { display: none; }

当然，标签可以有孩子，所以你可以随心所欲地重新设计开关。你应该小心地包括：焦点样式，对于选中复选框而不是点击它的人。

对于不支持：checked伪类（IE8及以下版本）的浏览器，使用全局处理程序和“已检查”类进行模拟非常容易。类似的东西：

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'); }
});

......应该这样做。

Answer 2

您可能需要在对象属性（或.data() api）中存储一些数据，但您的背景位置构思应该可以正常工作。只需将.offset().left的来电替换为.css('background-position')（您必须split和parseInt它返回的字符串）并保持插件“远离它。

将我的js代码调整为输入

2 个答案: