Question

我有一个css / javascript代码，只需将开关从开启切换到关闭，依此类推，我遇到的问题是当我想要在预览开关打开时翻转另一个开关时我想要关闭预览开关或开关。

trigger_switch($("#firstSwitch"), 'first switch has been trigger');
trigger_switch($("#secondSwitch"), 'second switch has been trigger');
trigger_switch($("#thirdSwitch"), 'third switch has been trigger');
trigger_switch($("#forthSwitch"), 'forth switch has been trigger');

function trigger_switch(switchId, output) {
  $(switchId).click(function() {
    $(switchId).toggleClass("switchOn");
    alert(output);
  });
};

Answer 1

您只需在开关元素上使用removeClass()，而不是单击的开关元素。您可以使用jQuery的not()方法实现此目的。另请注意，您可以使逻辑更加简洁，并通过附加单个事件处理程序并通过this关键字标识引发事件的元素来遵循DRY实践。这是一个例子：

$('.switch').click(function() {
    $('.switch').toggleClass('switchOn').not(this).removeClass('switchOn');
});

Updated fiddle

Answer 2

试试这个，

小提琴链接https://jsfiddle.net/he8zsbee/1/

    trigger_switch($("#firstSwitch"), 'first switch has been trigger');
    trigger_switch($("#secondSwitch"), 'second switch has been trigger');
    trigger_switch($("#thirdSwitch"), 'third switch has been trigger');
    trigger_switch($("#forthSwitch"), 'forth switch has been trigger');

    function trigger_switch(switchId, output) {
      $(switchId).click(function() {
        $('.switchOn').toggleClass("switchOn");
        switchId.addClass("switchOn");
        alert(output);
      });
    };

    .switch {
      width: 62px;
      height: 32px;
      background: #e5e5e5;
      z-index: 0;
      margin: 0;
      padding: 0;
      appearance: none;
      border: none;
      cursor: pointer;
      position: relative;
      border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
    }
    .switch:before {
      content: ' ';
      position: absolute;
      left: 1px;
      top: 1px;
      width: 60px;
      height: 30px;
      background: #fff;
      z-index: 1;
      border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
    }
    .switch:after {
      content: ' ';
      height: 29px;
      width: 29px;
      border-radius: 28px;
      background: #fff;
      position: absolute;
      z-index: 2;
      top: 1px;
      left: 1px;
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
      -webkit-box-shadow: 0 2px 5px #999999;
      box-shadow: 0 2px 5px #999999;
    }
    .switchOn,
    .switchOn:before {
      background: #4cd964 !important;
    }
    .switchOn:after {
      left: 32px !important;
    }
    .switch {
      width: 100px;
      height: 52px;
      background: #e5e5e5;
      z-index: 0;
      margin: 0;
      padding: 0;
      appearance: none;
      border: none;
      cursor: pointer;
      position: relative;
      border-radius: 53px;
      -moz-border-radius: 53px;
      -webkit-border-radius: 53px;
      display: inline-block;
    }
    .switch:before {
      content: ' ';
      position: absolute;
      left: 2px;
      top: 2px;
      width: 98px;
      height: 50px;
      background: #e5e5e5;
      z-index: 1;
      border-radius: 52px;
      -moz-border-radius: 52px;
      -webkit-border-radius: 52px;
    }
    .switch:after {
      content: ' ';
      height: 33px;
      width: 33px;
      border-radius: 52px;
      background: #FFFFFF;
      position: absolute;
      z-index: 2;
      top: 8px;
      left: 6px;
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
      -webkit-box-shadow: 0 2px 5px #999999;
      box-shadow: 0 2px 5px #d1c7cf;
    }
    .switchOn,
    .switchOn:before {
      background: #00DE68 !important;
    }
    .switchOn:after {
      left: 62px !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters" class="vertical medium-horizontal menu">
  <li>
    <p>first switch</p>
    <div class="switch" id="firstSwitch"></div>
  </li>
  <li>
    <p>second switch</p>
    <div class="switch" id="secondSwitch"></div>
  </li>
  <li>
    <p>third switch</p>
    <div class="switch" id="thirdSwitch"></div>
  </li>
  <li>
    <p>forth switch</p>
    <div class="switch" id="forthSwitch"></div>
  </li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

希望这有帮助.. :)）

一次只翻转一个开关

2 个答案: