jquery 只允許在單擊時一次選擇一個 div 元素

Question

我設計了一些標記，用戶可以在其中使用 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>

Answer 1

為了實現您的目標，請在所有其他.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>

Answer 2

只需使用 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>

Answer 3

您可以使用：

 $('.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>

這行得通！