Jquery (已检查)问题

Question

大家好，我是JS/jQuery的初学者，我在向输入中添加选中的属性时遇到了问题。

​

$(".switch-label-2").click(function () {
    var span = $(this).parent().siblings('#reminderstatus');
    var status = span.html().trim() == "OFF" ? "ON" : "OFF";
    var color = span.html() == "ON" ? "#a2a2a2" : "#89c12d";
    span.html(status);
    span.css('color', color);
    console.log(status);
    if (status == "ON") {
        $("#switch-2").attr('checked', true);
    } else {
        $("#switch-2").attr('checked', false);
    }
});

.box {
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.remindertoggle {
    text-align: center;
    margin: 10px 0;
}

#reminderstatus {
    color: #a2a2a2;
    margin-right: 5px;
}
.switch {
    position: relative;
    display: inline-block;
}

.switch-label-2 {
    margin-bottom: 0;
    display: block;
    width: 48px;
    height: 24px;
    text-indent: -150%;
    clip: rect(0 0 0 0);
    color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .switch-label-2:before,
    .switch-label-2:after {
        content: "";
        display: block;
        position: absolute;
        cursor: pointer;
    }

    .switch-label-2:before {
        width: 100%;
        height: 24px;
        background-color: #dedede;
        border-radius: 9999em;
        -webkit-transition: background-color 0.25s ease;
        transition: background-color 0.25s ease;
    }

    .switch-label-2:after {
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        /*background-color: #fff;*/
        -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
        -webkit-transition: left 0.25s ease;
        transition: left 0.25s ease;
    }

.switch-input:checked + .switch-label-2:before {
    background-color: #89c12d;
}

.switch-input:checked + .switch-label-2:after {
    left: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
    <div class="remindertoggle">
        <span id="reminderstatus">OFF</span>                                         
        <div id="switch" class="switch">                                      
            <input id="switch-2" type="checkbox" class="switch-input">                                      <label for="switch-2" class="switch-label-2">Switch</label>   
        </div>                                  
    </div> 
</div>                      

​

您会注意到，当我单击“标签”时，除了一件事外，所有的东西都会发生变化，首先单击它添加属性检查到input，它不会检查实际的车皮框。

我很困惑，一整天都解决不了这个问题，我在谷歌上搜索了一下，却找不到答案。

进一步感谢您提供的任何信息和建议。

Answer 1

此版本修复外观(隐藏基础复选框)，开关的颜色每次正确显示，还使用.prop()方法正确设置属性，如jQuery文档(参见http://api.jquery.com/attr/)所述。还有几件小事也被整理/简化了。

​

$(".switch-label-2").click(function(e) {
  e.preventDefault();
  var span = $('#reminderstatus');
  var status = span.text().trim() == "OFF" ? "ON" : "OFF";
  var color = status == "OFF" ? "#a2a2a2" : "#89c12d";
  span.html(status);
  span.css('color', color);
  if (status == "ON") {
    $("#switch-2").prop('checked', true);
  } else {
    $("#switch-2").prop('checked', false);
  }
});

.box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.remindertoggle {
  text-align: center;
  margin: 10px 0;
}

#reminderstatus {
  color: #a2a2a2;
  margin-right: 5px;
}

.switch {
  position: relative;
  display: inline-block;
}

.switch-label-2 {
  margin-bottom: 0;
  display: block;
  width: 48px;
  height: 24px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch-label-2:before,
.switch-label-2:after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}

.switch-label-2:before {
  width: 100%;
  height: 24px;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}

.switch-label-2:after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /*background-color: #fff;*/
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}

.switch-input:checked+.switch-label-2:before {
  background-color: #89c12d;
}

.switch-input:checked+.switch-label-2:after {
  left: 30px;
}

#switch-2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
  <div class="remindertoggle">
    <span id="reminderstatus">OFF</span>
    <div id="switch" class="switch">
      <input id="switch-2" type="checkbox" class="switch-input"> <label for="switch-2" class="switch-label-2">Switch</label>
    </div>
  </div>
</div>

​

Answer 2

您需要使用prop(...)函数来检查和设置适当的值。

您还应该防止事件与preventDefault冒泡，因为这是导致奇怪的第一次点击。

​

$(".switch-label-2").click(function(e) {
  e.preventDefault();
  
  var isOn = $("#switch-2").prop('checked');

  // flip text status
  $('#reminderstatus').text(isOn ? "OFF" : "ON");
  
  // flip checked status
  $("#switch-2").prop('checked', !isOn);
});

.box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.remindertoggle {
  text-align: center;
  margin: 10px 0;
}

#reminderstatus {
  color: #a2a2a2;
  margin-right: 5px;
}

.switch {
  position: relative;
  display: inline-block;
}

.switch-label-2 {
  margin-bottom: 0;
  display: block;
  width: 48px;
  height: 24px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch-label-2:before,
.switch-label-2:after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}

.switch-label-2:before {
  width: 100%;
  height: 24px;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}

.switch-label-2:after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /*background-color: #fff;*/
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}

.switch-input:checked+.switch-label-2:before {
  background-color: #89c12d;
}

.switch-input:checked+.switch-label-2:after {
  left: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">

  <div class="remindertoggle">
    <span id="reminderstatus">OFF</span>
    <div id="switch" class="switch">
      <input id="switch-2" type="checkbox" class="switch-input">
      <label for="switch-2" class="switch-label-2">Switch</label>
    </div>
  </div>

</div>

​