Question

我是新手（我是平面设计师，不是编码员）。我需要一个切换按钮才能在应用程序中使用。遗憾的是我不能使用CSS3，因为它在应用程序中不起作用（我本可以使用纯CSS3切换按钮完成此操作）所以我决定使用图像作为切换按钮。我创建了一个翻转按钮的翻转图像，其中ON状态位于顶部，Off状态位于下方。然后我使用CSS来定位和隐藏Off状态，然后我创建了一个新类：hover将Off状态图像向上移动以替换On状态。这通常用于创建简单的翻转效果，我可以轻松地执行此操作，但是我需要它在单击时切换，而不是悬停。这是需要js的地方。

我还有一个隐藏的复选框（#optionsAutoClean），当切换开启时我需要进行检查，当切换为OFF时我需要取消选中。

我还需要能够在某些情况下将切换默认设置为OFF，而在另一端设置为ON。

任何帮助将不胜感激。再一次，我根本不太了解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。

Answer 2

看起来你正在使用jQuery - 而不是javascript; - ）

你在jQuery语句中缺少.click（）：

$('.yourClass').click(function()
{
...
}

你也可以尝试toggleClass：

$(".toggleBtn").toggleClass("toggleBtn_On toggleBtn_Off");

试试这个：

$('.toggleBtn').click(function()
{
     $('.toggleBtn').toggleClass("toggleBtn_On toggleBtn_Off"); //Adds 'toggleBtn_On', removes 'toggleBtn_Off' and vice versa
});

Javascript切换图像切换按钮类

2 个答案: