[英]jquery only allow one div element to be selected at a time on click
我设计了一些标记,用户可以在其中使用 select 一个 DIV 并显示突出显示.. 这工作正常,但是,我只想允许一次突出显示和选择一个 DIV.. 目前用户可以 select 所有 3 个 DIVS 和他们将全部突出显示。 我使用 jquery toggleClass 将“活动”class 添加/删除到 DIV。 “活动” class 的样式为 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>
为了实现您的目标,请在所有其他.pricecard.aircraft
元素上调用removeClass()
,这些元素不是被点击的元素:
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>
只需使用 HTML 和 CSS,不需要 JavaScript。
[name="price"]:checked + label > div { background-color: yellow; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <input type="radio" name="price" id="price1" value="20944" class="d-none"/> <label class="col-sm-4 my-1 d-inline-block" for="price1"> <div class="card pricecard aircraft active h-100"> <div class="card-body"> <span class="price1">£20,944</span></p> </div> </div> </label> <input type="radio" name="price" id="price2" value="20944" class="d-none"/> <label class="col-sm-4 my-1 d-inline-block" for="price2"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price2">£20,944</span></p> </div> </div> </label> <input type="radio" name="price" id="price3" value="20944" class="d-none"/> <label class="col-sm-4 my-1 d-inline-block" for="price3"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price3">£20,944</span></p> </div> </div> </label>
您可以使用:
$('.pricecard.aircraft').click(function() { $('.pricecard.aircraft').removeClass('active'); $(this).addClass('active'); })
.pricecard.aircraft.active { background-color: yellow }
<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>
这行得通!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.