javascript - 如何使用 JavaScript 进行自定义选择

Question

我有一些选项，我希望它们是可选的。

<div class="row">
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 1</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 2</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 3</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 4</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 5</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 6</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 7</div>
  </div>
</div>

.new__order__choice .juice__box {
  border: 2px solid var(--second-sub-color);
  color: var(--second-sub-color);
  display: block;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  margin: 10px 0;
  cursor: pointer;
}

如您所见，我有 7 个项目，我希望它们是可选的。我可以为此添加 CSS，但让我感到困惑的是，当我选择其他 CSS 时，我想取消选择所选的。

它应该是这样的：

如果你能帮助我，我会很高兴的。谢谢。

标签： javascripthtmljquerycss

Answer 1

如果我理解正确你想要的是背景颜色只适用于最后选择，如果是这样，你可以在 css 中做到这一点：

.juice__box.selected{
  background-color:blue;
}

这在jquery中

$('.juice__box').click(function(){
    $('.juice__box').removeClass('selected');
 $(this).addClass('selected');
  
});

在片段中看到它

$('.juice__box').click(function(){
    $('.juice__box').removeClass('selected');
 $(this).addClass('selected');
  
});

.juice__box {
  border: 2px solid var(--second-sub-color);
  color: var(--second-sub-color);
  display: block;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  margin: 10px 0;
  cursor: pointer;
}
.juice__box.selected{
  background-color:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 1</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 2</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 3</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 4</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 5</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 6</div>
  </div>
  <div class="col-lg-3 col-md-12 col-sm-12">
    <div class="juice__box">Juice 7</div>
  </div>
</div>