Question

当我使用这种方式时 - 它只能运行一次，然后点击停止后：

<label class="switch">
<input type="checkbox" class="switch5">
<div class="slider round"></div>
</label> 

   $('.switch5').on('click', function() {
          $( "#slider" ).slider( "option", "disabled", false );
          $( "#slider" ).slider( "option", "value", 100 );

    $(this).off('click');

    $(this).on('click', function() {
        $( "#slider" ).slider( "option", "disabled", true );
        $( "#slider" ).slider( "option", "value", 0 );

    });


});

当我使用单独的按钮来打开＆＃39;并且＆＃39;关闭＆＃39; （divs）然后它完美地工作 - 但我想要一个开关而不是两个按钮：

<div class="on-button">ON</div>
<div class="off-button">OFF</div>


$('.on-button').on('click', function() {
    $( "#slider" ).slider( "option", "disabled", false );
    $( "#slider" ).slider( "option", "value", 100 );
});
$('.off-button').on('click', function() {
    $( "#slider" ).slider( "option", "disabled", true );
    $( "#slider" ).slider( "option", "value", 0 );
});

Answer 1

欢迎使用Stack Overflow。

您的第一个示例由于以下原因而失败：

$(this).off('click');

.off()方法会删除附加了.on()。
的事件处理程序

所以在第一次点击后，.off()删除了绑定的回调;因此，复选框元素上的click事件没有分配回调函数。它只能工作一次。

更新1

以下是您可能需要考虑的示例：https://jsfiddle.net/Twisty/23L6hb63/

<强> HTML

<label class="switch">
  <input type="checkbox" class="switch5">
  <div class="slider round"></div>
</label>

<强>的jQuery

$(function() {
  $(".slider").slider({
    min: 0,
    max: 1,
    range: "min",
    change: function(e, ui) {
      $(".switch5").val(ui.value)
      if (ui.value < 1) {
        $(".switch5").prop("checked", false);
      } else {
        $(".switch5").prop("checked", true);
      }
    }
  });
});

更新2

基于我的困惑和你的新例子，我建议如下：

  $('.switch5').on('click', function() {
    if ($(this).is(":checked")) {
      $("#slider").slider("option", {
        disabled: false,
        value: 100
      });
    } else {
      $("#slider").slider("option", {
        disabled: true,
        value: 0
      });
    }
  });

工作示例：https://jsfiddle.net/Twisty/uz1noyt0/

为什么切换按钮（输入类型=＆＃34;复选框＆＃34;）仅适用于 - JQuery？

1 个答案: