更改文本的功能不起作用jQuery

Question

对jQuery很新.我正在尝试编写一个函数,如果打开/关闭开关(绿色),则会更改div中的文本.我不确定为什么这不起作用.这是我尝试过的:

$(document).ready(function() {

  if ($('.slider').is(':checked')) {
  changeText();
}

});

function changeText() {
 ('#screen span').text('00');
}

这是相关的CSS:

.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 26px;
  bottom: 95px;
  left: 85px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #990000;
  -webkit-transition: .4s;
  transition: .4s;
 }

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

input:checked + .slider {
  background-color: #00b300;
}

这是相关的html:

  <div id="contents">
    <div id="screen"><span>--</span></div>
    <button id="strict"></button>
    <button id="start"></button>
  </div>

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

这里的代码笔也来自:http://codepen.io/codyreandeau/pen/dNOwwB

任何正确方向的推动都会受到赞赏,谢谢.

Answer 1

您div不提供该checked属性,因为它不是输入.给它一个唯一的选择器或使用jQuery的.prev()方法.

if($('.slider').prev('input').is(':checked')) {

或者一个唯一的ID:

<input type="checkbox" id="sliderCheckbox"/>

if($('#sliderCheckbox').is(':checked')) {