Question

在下面的代码中，我编码了一个使用CSS禁用和启用链接的开关。问题是我的交换机没有改变其外观。它正在完成其工作（JavaScript功能正在工作），但外观却没有。我对

没有太多经验

HTML按钮：

                <label class="switch" isValue="0">
                    <div class="slider round">
                    </div>
                </label>

CSS：

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
    background-color: #2196F3;
}

input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
    transform: translateX(26px);
}

 Rounded sliders 
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.dim.disabled {
    pointer-events: none;
    background-color: grey;
}

JavaScript：

   $(document).on('click', '.switch', function () {
        var v = $(".switch").attr("isValue");
        if (v == 1) {
            $(".switch").attr("isValue", "0");
            $(".dim").removeClass("disabled");
        }
        else {
            $(".switch").attr("isValue", "1");
            $(".dim").addClass("disabled");
        }
    });

我知道这有问题，因为它属于输入类型复选框。

感谢您提供的任何帮助。

Answer 1

好的，忽略提议的代码过于模糊，这是jQuery类切换的工作方式：

$(".switch").on('click', function () {
  $(this)
    .toggleClass('disabled')
    .data('status', ($(this).hasClass("disabled")? '0':'1'));
    
  console.clear();
  console.log('data-status value is :', $(this).data('status') );
});

.switch > span {
  display: block;
  width: 68px;
  height: 68px;
  background-color: green;
  border-radius: 34px;
}

.switch.disabled > span  {
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch" data-status="1"><span></span></div>

Answer 2

仅使用CSS，以防您想走那条路线。认为这可能很有用，因为您说的是Javascript可以工作，但外观不会改变。

基本开关

/** Format Example Body **/

body {
  margin: 0;
  padding: 0;
  background: #f0f0f0;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
}

.components {
  padding: 20px;
}

.components .content {
  margin-bottom: 20px;
}

.default {
  margin: 0 5px;
}

.switch {
  display: inline-block;
}

.switch input {
  display: none;
}

.switch small {
  display: inline-block;
  width: 100px;
  height: 18px;
  background: #3a3a3a;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.switch small:after {
  content: "No";
  position: absolute;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
  text-align: right;
  padding: 0 6px;
  box-sizing: border-box;
  line-height: 18px;
}

.switch small:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: .3s;
  box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}

.switch input:checked~small {
  background: #3fc55c;
  transition: .3s;
}

.switch input:checked~small:before {
  transform: translate(25px, 0px);
  transition: .3s;
}

.switch input:checked~small:after {
  content: "Yes";
  text-align: left;
}

<div class="container">
  <div class="components">
    <div class="content">
      <label class="switch default">
                <input type="checkbox">
                <small></small>
            </label>
    </div>
  </div>
</div>

Answer 3

我认为您只需要为启用的链接或禁用的链接指定类的特定名称

样式

.link_enabled {
    /* style for enabled link */
}
.link_disabled {
    /* style for disabled link */
}

脚本

$(document).on('click', '.switch', function () {
    var v = $(".switch").attr("isValue");
    if (v == 1) {
        $(".switch").attr("isValue", "0");
        $(".switch").removeClass("link_enabled").addClass("link_disabled");
        $(".dim").removeClass("disabled");
    }
    else {
        $(".switch").attr("isValue", "1");
        $(".switch").removeClass("link_disabled").addClass("link_enabled");
        $(".dim").addClass("disabled ");
    }
});

Answer 4

为便于记录，请注意，它在JS（es6）中更简单。而且因为该主题只在标记列表中提到了javascript（而不是jQuery）。

document.querySelector('.switch').onclick = function(e) {
  this.dataset.status = this.classList.toggle('disabled')?'0':'1';

  console.clear();
  console.log('data-status value is :', this.dataset.status );
}

.switch>span {
  display: block;
  width: 68px;
  height: 68px;
  background-color: green;
  border-radius: 34px;
}

.switch.disabled>span {
  background-color: grey;
}

<div class="switch" data-status="1" ><span></span></div>

拨动开关禁用和启用链接

4 个答案: