Question

我想按颜色过滤以下内容，然后在我的网站上将其重置，并且所有过滤均以正确的方式进行，除了使内容消失而不是重置的重置之一。

以下是我的代码：

body {
  margin: 0;
  text-align: center;
  font-family: Verdana;
  background: #f5f5f5;
}

h1 {
  text-align: center;
}

.container {
  width: 70%;
  margin: 0 auto;
  display: grid;
}

input[type="radio"] {
  display: none;
}

label {
  width: 25%;
  float: left;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #222222;
  padding: 0.5%;
  margin: 0.5%;
  margin-bottom: 30px;
  cursor: pointer;
}

input[type="radio"][id="blue"]:checked+label {
  background: #6666ff;
}

input[type="radio"][id="blue"]:checked~.green {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

input[type="radio"][id="green"]:checked+label {
  background: #66dd99;
}

input[type="radio"][id="green"]:checked~.blue {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

input[type="radio"][id="reset"]:checked~.green,
input[type="radio"][id="reset"]:checked~.blue {
  display: block;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

.tile {
  width: 17%;
  height: 60px;
  float: left;
  transition: all 1s;
  margin: 0.5%;
  padding: 0.5%;
  line-height: 60px;
}

.green {
  background: #66dd99;
}

.blue {
  background: #6666ff;
}

<h1>FILTER BY COLOR</h1>
<div class="container">
  <input type="radio" id="blue" name="color">
  <label for="blue">BLUE</label>
  <input type="radio" id="green" name="color">
  <label for="green">GREEN</label>
  <input type="radio" id="reset" name="color">
  <label for="reset">RESET</label>

  <div class="tile blue">1</div>
  <div class="tile green">2</div>
  <div class="tile blue">3</div>
  <div class="tile green">4</div>
</div>

我该如何解决？

Answer 1

重置单选按钮的CSS规则使绿色和蓝色div消失。那不应该。

只需删除此部分：

body {
  margin: 0;
  text-align: center;
  font-family: Verdana;
  background: #f5f5f5;
}

h1 {
  text-align: center;
}

.container {
  width: 70%;
  margin: 0 auto;
  display: grid;
}

input[type="radio"] {
  display: none;
}

label {
  width: 25%;
  float: left;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #222222;
  padding: 0.5%;
  margin: 0.5%;
  margin-bottom: 30px;
  cursor: pointer;
}

input[type="radio"][id="blue"]:checked+label {
  background: #6666ff;
}

input[type="radio"][id="blue"]:checked~.green {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

input[type="radio"][id="green"]:checked+label {
  background: #66dd99;
}

input[type="radio"][id="green"]:checked~.blue {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

/*
input[type="radio"][id="reset"]:checked~.green,
input[type="radio"][id="reset"]:checked~.blue {
  display: block;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}
*/
.tile {
  width: 17%;
  height: 60px;
  float: left;
  transition: all 1s;
  margin: 0.5%;
  padding: 0.5%;
  line-height: 60px;
}

.green {
  background: #66dd99;
}

.blue {
  background: #6666ff;
}

<h1>FILTER BY COLOR</h1>
<div class="container">
  <input type="radio" id="blue" name="color">
  <label for="blue">BLUE</label>
  <input type="radio" id="green" name="color">
  <label for="green">GREEN</label>
  <input type="radio" id="reset" name="color">
  <label for="reset">RESET</label>

  <div class="tile blue">1</div>
  <div class="tile green">2</div>
  <div class="tile blue">3</div>
  <div class="tile green">4</div>
</div>

如何重置输入单选按钮？

1 个答案: