Question

我想在按下.hide按钮时将.slide类添加到所有.option div。

我如何修改我的JS，以便在按下.slide时，所有.hide类div都被赋予类.option（如果它们还没有）？

$(".option").on("click", function() {
  $(".window").slideToggle("fast");
});

$(':radio').change(function(event) {
  var id = $(this).data('id');
  $('.' + id).removeClass('hide').siblings().addClass('hide');
});

.hide {
  display: none;
}

.list {
  display: flex;
  list-style-type: none;
  border: 3px solid;
}

.slide {
  height: 200px;
  width: 200px;
  border: 3px solid;
}

.window {
  position: relative;
  display: none;
}

.option {
  display: flex;
  height: 50px;
  width: 100px;
  color: white;
  font-weight: 700;
  border-radius: 4px;
  flex-direction: column;
  background: #fc2757;
  margin-left: -3px;
  margin-right: -3px;
  transition: all 300ms;
  cursor: pointer;
}

.window {
  border: 0;
  display: none;
  left: 0px;
  padding: 2px 15px 2px 5px;
  top: 2px;
  list-style: none;
  overflow: auto;
}

.option {
  border: 2px solid;
  padding: 5px;
  display: block;
}

button {
  background-color: #6bbe92;
  width: 302px;
  border: 0;
  padding: 10px 0;
  margin: 5px 0;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

/* Input style */
input[type="radio"] {
  opacity: 0;
  width: 0;
  height: 0;
}

input[type="radio"]:active~label {
  opacity: 1;
}

input[type="radio"]:checked~label svg {
  opacity: 1;
  border: 3px solid;
  border-radius: 50%;
  fill: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="option">Create</div>
<div class="window">
  <ul class="list">
    <li>
      <input type="radio" id="deal" value="deal" name="radio" data-id="deal" /><label for="deal"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="100" height="100"><path d="M21.531 54.713L39.29 72.472l32.583-32.583L54.115 22.13 21.531 54.713zm70.993-24.39l-7.556-7.557a10.088 10.088 0 0 1-4.841 1.231c-5.591 0-10.123-4.532-10.123-10.122 0-1.753.448-3.402 1.232-4.841l-7.557-7.557a5.074 5.074 0 0 0-7.157 0L1.478 56.524a5.075 5.075 0 0 0 0 7.156l7.558 7.557a10.085 10.085 0 0 1 4.841-1.23c5.591 0 10.122 4.53 10.122 10.121 0 1.753-.447 3.402-1.232 4.842l7.557 7.557a5.077 5.077 0 0 0 7.158 0l55.044-55.046a5.077 5.077 0 0 0-.002-7.158zM39.29 80.595L13.41 54.713l40.707-40.705 25.879 25.881L39.29 80.595z" fill="#929daf"/></svg>Deals</label></li>
    <li>
      <input type="radio" id="buzz" value="buzz" name="radio" data-id="buzz" /><label for="buzz"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="100" height="100"><path d="M78.2 48.916a3.647 3.647 0 0 1 0-3.195l3.355-6.866a3.639 3.639 0 0 0-1.565-4.814l-6.75-3.58a3.634 3.634 0 0 1-1.877-2.588l-1.321-7.529a3.637 3.637 0 0 0-4.094-2.973l-7.569 1.07a3.642 3.642 0 0 1-3.038-.986l-5.495-5.313a3.64 3.64 0 0 0-5.061 0l-5.495 5.313a3.634 3.634 0 0 1-3.038.986l-7.569-1.07a3.635 3.635 0 0 0-4.09 2.973l-1.321 7.529a3.644 3.644 0 0 1-1.878 2.587l-6.753 3.58a3.64 3.64 0 0 0-1.561 4.815l3.355 6.866a3.647 3.647 0 0 1 0 3.195l-3.355 6.867a3.639 3.639 0 0 0 1.564 4.814l6.75 3.58a3.644 3.644 0 0 1 1.878 2.588l1.32 7.528a3.637 3.637 0 0 0 4.095 2.973l7.568-1.07a3.642 3.642 0 0 1 3.039.986l5.494 5.313a3.64 3.64 0 0 0 5.062 0l5.495-5.313a3.634 3.634 0 0 1 3.038-.986l7.569 1.07a3.637 3.637 0 0 0 4.093-2.973l1.321-7.528a3.644 3.644 0 0 1 1.878-2.588l6.75-3.58a3.642 3.642 0 0 0 1.565-4.814l-3.36-6.867zM40.04 69.152l8.9-16.965-14.555-7.263 20.214-19.438-8.901 16.95 14.552 7.263-20.21 19.453z" fill="#929daf"/></svg>Buzz</label></li>
  </ul>
</div>
<div class="slide deal hide">deals</div>
<div class="slide buzz hide">buzz</div>

Answer 1

这就是addClass方法的用途，只需更改为

$(".option").on("click", function() {
  $(".window").slideToggle("fast");
  $('.slide').addClass('hide');
});

，它将被添加到所有.slide元素

Answer 2

与CertainPerformance的帖子类似，您可以使用.hide()。这消除了设置css类的需要。

请参阅http://api.jquery.com/hide/

$(".option").on("click", function() {
  $(".window").slideToggle("fast");
  $('.slide').hide();
});

单击时向所有div添加隐藏类

2 个答案: