Question

当我单击切换复选框“按钮”时，我无法切换到备用背景图像。我将相关代码输入CodePen，它能够正确切换。但是，当我将其复制到文本编辑器中时（如下面的代码所示，它甚至无法到达嵌套在此行中的警报语句：“ $（'input [type =” checkbox“]”'）。click（function （）{“。

我跟随“ https://www.w3schools.com/howto/howto_css_switch.asp”创建了开关；但是，不清楚为什么它们将输入嵌套在label标签中，或者为什么要包含span标签。任何帮助或解释将不胜感激。

HTML（我的代码的一部分）：

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

CSS（我的代码的一部分）：

body {
  background-image: url(background.png);
  ...
}

/* the box around the slider */
.switch {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 34px;
  top: 37px;
  left: 40px;
}

/* hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

JAVASCRIPT（我所有的代码）：

$('input[type="checkbox"]').click(function(){
    alert("got here");
    if($(this).is(":checked")){
       $('body').css("background-image", "url(background-dark.png)");  
    }
    else if($(this).is(":not(:checked)")){
       $('body').css("background-image", "url(background1.png)");
    }
});

我希望每次单击切换开关时，背景图像都会更改为“ background-dark.png”。但是，当我反复单击切换开关时，似乎什么也没发生。

Answer 1

您的开关工作正常。随附的span可以代替HTML的原始复选框。 Label用于显示input元素的描述。但是，目前，他们还没有包含任何文本，而是将其用作包装器来定位和调整复选框的大小。

$('input[type="checkbox"]').click(function(){
    if($(this).is(":checked")){
       $('body').css("background-image", "url(https://www.w3schools.com/html/img_girl.jpg)");  
    }
    else if($(this).is(":not(:checked)")){
       $('body').css("background-image", "url(https://www.w3schools.com/html/pic_trulli.jpg)");
    }
});

body {
  background-image: url(https://www.w3schools.com/html/pic_trulli.jpg);
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

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

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

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
</body>

如何使用嵌套在标签class =“ ...”中的输入类型=复选框在背景图像之间切换？

1 个答案: