Как переключаться между фоновыми изображениями, используя флажок input type =, который вложен в label class = "..."? - PullRequest
Новая
       33

Как переключаться между фоновыми изображениями, используя флажок input type =, который вложен в label class = "..."?

0 голосов
/ 11 июня 2019

Я не могу переключить свое альтернативное фоновое изображение, когда нажимаю кнопку переключателя «кнопка». Я ввел свой соответствующий код в CodePen, и он смог правильно переключаться; однако, когда я копирую его в свой текстовый редактор (как показано в приведенном ниже коде, он не может даже добраться до оператора оповещения, вложенного в эту строку: "$ ('input [type =" checkbox "]'). click (function () {".

Я следовал "https://www.w3schools.com/howto/howto_css_switch.asp" для создания переключателя, однако неясно, почему они вложили ввод в тег метки или почему они включают тег 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' каждый раз, когда я нажимаю на тумблер; однако, кажется, ничего не происходит, когда я нажимаю на тумблер.

1 Ответ

0 голосов
/ 11 июня 2019

Ваш переключатель работает нормально. Включенный 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>
...