Question

我有一个“ Before and After”开关，当该开关打开时，该开关在切换前后图像方面工作正常。但是，由于某些原因，切换开关无法更改状态（灰色变为蓝色，并且从左向右移动）。

我在这里到处都是，但是我不知道为什么它没有明显地切换。如果您有任何想法，我将非常感谢第二双眼睛。

如果能解决我的难题，请先谢谢！

// BEFORE AND AFTER TOGGLE
jQuery(function($){
    $('#cflow_flag').on("change", function() {
      $('#submit-job').toggle();
      $('#submit-cflow').toggle();
    });
  });

/* ROUNDED TOGGLE SWITCH */
/* 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%;
}

/* TOGGLE ITEMS */
.before-after-wrap {
	text-align: center;
}
.toggle-wrapper {
	display: flex;
	justify-content: space-between;
	width: 40%;
	margin: 0 auto;
}
.toggle-title {
	margin-bottom: 25px;
}

#submit-cflow {
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="before-after-wrap">
	<div class="toggle-title">CLICK TO SWITCH TO SEE THE BEFORE</div>
	
	<div class="toggle-wrapper">
		<div class="bs">B.S.</div>
		<div>
			<label class="switch">
			  <input type="checkbox" id="cflow_flag"><br>
			  <span class="slider round"></span>
			</label>
		</div>
		<div class="as">A.S.</div>
	</div>
	
	<div type="button" id="submit-job"  class="btn btn-primary">
			<img src="https://stable.stable-demos.com/wp-content/uploads/slide-before-2.jpg" alt="" />
	</div>
	<div role="tabpanel" class="tab-pane fade" id="commit-view">
	   <div type="button" id="submit-cflow" class="btn btn-primary">
	   		<img src="https://stable.stable-demos.com/wp-content/uploads/slide-after-2.jpg" alt="" />
	   </div>
	</div>
</div>

Answer 1

这是因为在CSS中，您正在使用+选择器来选择输入的直接同级。但是您有一个<br>标签。

<input type="checkbox" id="cflow_flag"><br><span class="slider round"></span>

您可以使用~选择器来解决此问题。或者，您可以保持CSS不变，而只需删除<br>标签：

<input type="checkbox" id="cflow_flag"><span class="slider round"></span>

这是CSS的重要组成部分：

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);
}

// BEFORE AND AFTER TOGGLE
jQuery(function($) {
  $('#cflow_flag').on("change", function() {
    $('#submit-job').toggle();
    $('#submit-cflow').toggle();
  });
});

/* ROUNDED TOGGLE SWITCH */


/* 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%;
}


/* TOGGLE ITEMS */

.before-after-wrap {
  text-align: center;
}

.toggle-wrapper {
  display: flex;
  justify-content: space-between;
  width: 40%;
  margin: 0 auto;
}

.toggle-title {
  margin-bottom: 25px;
}

#submit-cflow {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="before-after-wrap">
  <div class="toggle-title">CLICK TO SWITCH TO SEE THE BEFORE</div>

  <div class="toggle-wrapper">
    <div class="bs">B.S.</div>
    <div>
      <label class="switch">
			  <input type="checkbox" id="cflow_flag"><br>
			  <span class="slider round"></span>
			</label>
    </div>
    <div class="as">A.S.</div>
  </div>

  <div type="button" id="submit-job" class="btn btn-primary">
    <img src="https://stable.stable-demos.com/wp-content/uploads/slide-before-2.jpg" alt="" />
  </div>
  <div role="tabpanel" class="tab-pane fade" id="commit-view">
    <div type="button" id="submit-cflow" class="btn btn-primary">
      <img src="https://stable.stable-demos.com/wp-content/uploads/slide-after-2.jpg" alt="" />
    </div>
  </div>
</div>

为什么我的拨动开关不改变点击状态？

1 个答案: