时间戳

首页 > 解决方案 > jquery 只允许在单击时一次选择一个 div 元素

javascript - jquery 只允许在单击时一次选择一个 div 元素

问题描述

我设计了一些标记，用户可以在其中选择一个 DIV 并显示突出显示.. 这工作正常，但是，我只想允许一个 DIV 一次突出显示和选择.. 目前用户可以选择所有 3 个 DIVS，他们将全部突出显示。我使用 jquery toggleClass 向 DIV 添加/删除“活动”类。“活动”类在 CSS 中设置样式以显示蓝色背景。

如何阻止用户选择所有 3 个？

$('.pricecard.aircraft').click(function() {
  // this will fire when you click view
  $(this).toggleClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span></p>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span></p>
    </div>
  </div>
</div>

标签： javascriptjquerycss

解决方案

为了实现您的目标，请调用不是被点击的removeClass()所有其他元素：.pricecard.aircraft

let $divs = $('.pricecard.aircraft').click(function() {
  $divs.not(this).removeClass('active');
  $(this).toggleClass('active');
});
.active { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft active h-100">
    <div class="card-body">
      <span class="price1">£20,944</span>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price2">£20,944</span>
    </div>
  </div>
</div>
<div class="col-sm-4 my-1">
  <div class="card pricecard aircraft h-100">
    <div class="card-body">
      <span class="price3">£20,944</span>
    </div>
  </div>
</div>

推荐阅读