Question

input[type=radio],input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
.slider_wrap{
  max-width:600px;
  margin: 0 auto;
  text-align:center;
  font-size: 33px;
}
label:hover{
  cursor:pointer;
  color:#e26a63;
}

.slider{
  height: 200px;
}



#button-1:checked ~ .slider {
  background:blue;
}
#button-1:checked ~ #label1 {
color:#e26a63;
}

#button-2:checked ~ .slider {
   background: yellow;
}
#button-2:checked ~ #label2 {
color:#e26a63;
}

#button-3:checked ~ .slider {
   background: orange;
}
#button-3:checked ~ #label3 {
color:#e26a63;
}

#button-4:checked ~ .slider {
   background: cyan;
}
#button-4:checked ~ #label4 {
color:#e26a63;
}
#button-5:checked ~ .slider {
   background: black;
}
#button-5:checked ~ #label5 {
color:#e26a63;
}
#button-6:checked ~ .slider {
   background: grey;
}
#button-6:checked ~ #label6 {
color:#e26a63;
}
#button-7:checked ~ .slider {
   background: green;
}
#button-7:checked ~ #label7 {
color:#e26a63;
}
#button-8:checked ~ .slider {
   background: brown;
}
#button-8:checked ~ #label8 {
color:#e26a63;
}
#button-9:checked ~ .slider {
   background: red;
}
#button-9:checked ~ #label9 {
color:#e26a63;
}
#button-10:checked ~ .slider {
   background: green;
}
#button-10:checked ~ #label10 {
color:#e26a63;
}

<div class="slider_wrap">

<input value="10" type="checkbox" id="button-10" name="controls"  checked>
<input value="0" type="radio" id="button-1" name="controls">
<input value="1" type="radio" id="button-2" name="controls">
<input value="2" type="radio" id="button-3" name="controls">
<input value="3" type="radio" id="button-4" name="controls">
<input value="4" type="radio" id="button-5" name="controls">
<input value="5" type="radio" id="button-6" name="controls">
<input value="6" type="radio" id="button-7" name="controls">
<input value="7" type="radio" id="button-8" name="controls">
<input value="8" type="radio" id="button-9" name="controls">
<input value="9" type="radio" id="button-10" name="controls">

  
<div class="slider"></div>

<label id="label10" for="button-10"></label>
<label for="button-1" id="label1">1</label>
<label for="button-2" id="label2" >2</label>
<label for="button-3" id="label3">3</label>
<label for="button-4" id="label4">4</label>
<label for="button-5" id="label5">5</label>
<label for="button-6" id="label6">6</label>
<label for="button-7" id="label7">7</label>
<label for="button-8" id="label8">8</label>
<label for="button-9" id="label9">9</label>
<label for="button-10" id="label10">10</label>

  

</div>

我有一个改变div框背景的10个按钮，但是我遇到了一些问题。第一个是它从10开始。更重要的是，如果我不取消它，我的背景将不会改变。因此，需要手动取消选中并检查数字10，因为当我点击其他数字时它不会改变，就像其他数字一样。这是我对此作出的修改：https://codepen.io/anon/pen/qErZEg。我是新手，我无法弄清楚我做了什么（修改）错了。另外，如果我想使用一块文本而不是改变背景，那么正确的方法是什么？此时我会修改背景。：/

Answer 1

你有两个id =“label-10”的标签，一个没有内容，一个显示数字10.你还有两个输入id =“button-10”。

Answer 2

您可能希望使用onclick函数

使用jQuery执行此操作

$(document).ready(function(){

$( "#id of the number" ).click(function() {
   $("#id of div").css("background-color","yellow");
}); 
});

可以添加附加逻辑以使div的颜色取决于在同一函数中单击的数字。

单击数字更改div背景

2 个答案: