如何創建兩個不同的按鈕組

我正在創建兩個按鈕組。每當我點擊第二個按鈕組中的一個按鈕時，第一組中已經選擇的按鈕將被取消選擇。我能夠只選擇一個按鈕組。我想從每個組中選擇一個按鈕。如何創建兩個不同的按鈕組

<li class="col-md-12 panel-select"> 
    <div class="col-md-2">Subject</div> 
    <div class="col-md-9" id=""> 
      <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">English</button></div> 
      <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">Geography</button></div> 
      <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">History</button></div>   
     </div>    
    </li> 
    <li class="col-md-12 panel-select"> 
     <div class="col-md-2">Class</div> 
     <div class="col-md-9" id=""> 
     <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">I</button></div> 
     <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">II</button></div> 
     <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">III</button></div> 
    </div> 
</li>`

來源

2017-07-21 passionFinder

你能不能說清楚？我從上面得到的是當用戶點擊英語（主題）時，然後自動選擇Class（I，II或III）中的任一個，是嗎？ –

Ridoan，用戶想要從每個組中選擇一個按鈕。例如，用戶想要從主題點擊英語，從類別點擊II。當他點擊第二級時，英語將被取消選擇。用戶可以從所有選擇一個按鈕...希望澄清.. – passionFinder

一步一步完成這件事：

添加類的選擇按鈕，用戶只需點擊
$(this).addClass("selected");
創建所選按鈕自定義CSS（我們命名選擇）。
.selected { background-color: #A8A8A8; color: #FFFFFF; }
獲取所選按鈕的父代的ID。
group = $(this).parent().attr('id');
獲取所選按鈕父級的所有子元素。然後將這些存儲到名爲childClasses的變量中。
childClasses = $("#" + group).children();
檢查在同一組按鈕中是否有前一個按鈕被選中。如果有的話，只要從這些元素中刪除'selected'類。

for(var i = 0; i < childClasses.length; i++){ if(this.textContent != childClasses[i].textContent){ $("#" + childClasses[i].id).removeClass("selected"); } }

你也可以從我在下面提供的源代碼學習。我希望這可以幫助你。

$(document).ready(function() { 
 
    $(".btn-default").click(function() { 
 

 
    var childClasses, group; 
 

 
    // add class "selected" to a clicked button 
 
    $(this).addClass("selected"); 
 

 
    // get the parent's id of button element 
 
    group = $(this).parent().attr('id'); 
 

 
    // store all element of selected group 
 
    childClasses = $("#" + group).children(); 
 

 
    // remove previous selected button when user select a new button in the same group button 
 
    for (var i = 0; i < childClasses.length; i++) { 
 
     if (this.textContent != childClasses[i].textContent) { 
 
     $("#" + childClasses[i].id).removeClass("selected"); 
 
     } 
 
    } 
 

 
    }); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>Example</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <style type="text/css"> 
 
    .selected { 
 
     background-color: #A8A8A8; 
 
     color: #FFFFFF; 
 
    } 
 
    
 
    .row { 
 
     padding: 10px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-2 col-sm-6 col-xs-4">Subject</div> 
 
     <div class="col-lg-9 col-sm-6 col-xs-8"> 
 
     <div class="btn-group" id="group1" role="group" aria-label="..."> 
 
      <button type="button" id="subject1" class="button1 btn btn-default">English</button> 
 
      <button type="button" id="subject2" class="button1 btn btn-default">Geography</button> 
 
      <button type="button" id="subject3" class="button1 btn btn-default">History</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-2 col-sm-6 col-xs-4">Class</div> 
 
     <div class="col-lg-9 col-sm-6 col-xs-8"> 
 
     <div class="btn-group" id="group2" role="group" aria-label="..."> 
 
      <button type="button" id="class1" class="button2 btn btn-default">I</button> 
 
      <button type="button" id="class2" class="button2 btn btn-default">II</button> 
 
      <button type="button" id="class3" class="button2 btn btn-default">III</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</body> 
 

 
</html>

來源

2017-07-23 17:29:53

嗨Ridoan，當我點擊第二組中的按鈕，第一組選擇被刪除...問題仍然存在.. – passionFinder

@passionFinder ..我已經修好了。只是檢查出來。 –

謝謝Ridoan ..它工作正常... – passionFinder

如何創建兩個不同的按鈕組

回答

相關問題