用于切换图像切换按钮类的Javascript

Question

我是一个js新手(我是一个平面设计师，不是编码员)。我需要一个切换按钮才能在应用程序中使用。不幸的是，我不能使用 CSS3，因为它在应用程序中不起作用(我本可以使用纯 CSS3 切换按钮自行完成)所以我决定使用图像作为切换按钮。我创建了切换按钮的鼠标悬停图像，顶部是 ON 状态，下方是 Off 状态。然后我使用 CSS 来定位和隐藏 Off 状态，然后我创建了一个新类:hover 将 Off 状态图像向上移动以替换 On 状态。这通常用于创建简单的翻转效果，我可以很容易地做到这一点，但是我需要它在单击时切换，而不是悬停。这就是需要js的地方。

我还有一个隐藏的复选框 (#optionsAutoClean)，当开关打开时我需要选中它，当开关关闭时我需要取消选中它。

我还需要能够将某些切换开关默认设置为关闭，而另一些设置为打开。

如有任何帮助，我们将不胜感激。同样，我对 JS 了解不多。

下面是我的代码和 jsfiddle 的链接。

HTML:

<div>
  <a id="btnAutoClean" class="toggleBtn" title="On/Off"></a>
  <input id="optionsAutoClean" disabled="disabled" class="toggleChk" type="checkbox">
</div>

CSS:

.toggleBtn {
    display: block;
    width: 57px;
    height: 20px;
    background-image:url('http://techtalk.pcpitstop.com/wp-content/uploads/toggle.png');
}
.toggleBtn:hover {
    cursor:pointer;
}
.toggleBtn_Off {
    background-position: 0 -20px;
}
.toggleBtn_On {
    background-position: 0 0;
}
.toggleChk {
    display:none;
}

JavaScript:(我试了一下)

$(document).ready(function(){
    $(".toggleBtn").removeClass(".toggleBtn_Off").addClass(".toggleBtn_On");
    $(".toggleBtn").removeClass(".toggleBtn_On").addClass(".toggleBtn_Off");
   });
});

jsfiddle 链接:https://jsfiddle.net/dd8v3wgb/1/

Answer 1

要在普通的 javascript 中执行此操作，并假设您最终会使用多个按钮进行切换，而不是只有一个，您可以通过为每个按钮的事件监听器添加一个切换函数来完成此操作。 ( JSFiddle )

function toggle(button) {
  return function() {
    button.classList.toggle('toggleBtn_Off');
    button.classList.toggle('toggleBtn_On');

    // assuming the input is the next element after the button
    button.nextElementSibling.checked = button.classList.contains('toggleBtn_On');
  }
}

var buttons = document.getElementsByClassName('toggleBtn');

// Set defaults
buttons[0].classList.add('toggleBtn_Off'); // default off
buttons[1].classList.add('toggleBtn_On'); // default on

// Set event listeners to toggle each button and the hidden input next to it
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', toggle(buttons[i]));
}

function toggle(button) {
  return function() {
    button.classList.toggle('toggleBtn_Off');
    button.classList.toggle('toggleBtn_On');

    // assuming the input is the next element after the button
    button.nextElementSibling.checked = button.classList.contains('toggleBtn_On');
  }
}

var buttons = document.getElementsByClassName('toggleBtn');

// Set defaults
buttons[0].classList.add('toggleBtn_Off'); // default off
buttons[1].classList.add('toggleBtn_On'); // default on

// Set event listeners to toggle each button and the hidden input next to it
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', toggle(buttons[i]));
}

.toggleBtn {
  display: block;
  width: 57px;
  height: 20px;
  background-image: url('http://techtalk.pcpitstop.com/wp-content/uploads/toggle.png');
}

.toggleBtn:hover {
  cursor: pointer;
}

.toggleBtn_Off {
  background-position: 0 -20px;
}

.toggleBtn_On {
  background-position: 0 0;
}

.toggleChk {
  display: none;
}

<div>
  <a id="btnAutoClean" class="toggleBtn" title="On/Off"></a>
  <input id="optionsAutoClean" disabled="disabled" class="toggleChk" type="checkbox">
  <a id="someOtherButton" class="toggleBtn" title="On/Off"></a>
  <input id="optionsAutoClean" disabled="disabled" class="toggleChk" type="checkbox">
</div>

classList 在旧版浏览器中不可用，因此请使用此 Polyfill如果您需要支持他们。