如何创建两个不同的按钮组

Question

我正在创建两个按钮组。每当我单击第二个按钮组中的一个按钮时，第一组中已经 selected 的按钮正在被删除selected。我能够 select 只有一个按钮两组。我想 select 每组一个按钮。

<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>`

Answer 1

逐步完成此操作：

向用户刚刚单击的选定按钮添加 class
$(this).addClass("selected");
为所选按钮（我们将其命名为 selected）创建自定义 css。
.selected { background-color: #A8A8A8; color: #FFFFFF; }
获取所选按钮父级的 ID。
group = $(this).parent().attr('id');
获取所选按钮父级的所有子元素。然后将这些存储到名为 childClasses.
childClasses = $("#" + group).children();
检查同一组按钮中是否有上一个按钮被选中。如果有的话，只需从这些元素中删除 'selected' class。

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

You could also learn from the source code i've provided below. I hope this helps you.

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

如何创建两个不同的按钮组

How do I create two different button groups

twitter-bootstrap

button

buttongroup