Question

我正在创建两个按钮组。每当我从第二个按钮组中单击一个按钮时，已取消选择第一组中已选择的按钮。我只能选择一个按钮组。我想从每个组中选择一个按钮。

<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

逐步完成这项工作：

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

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

您还可以从我在下面提供的源代码中学习。我希望这可以帮助你。

＆＃13;

$(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");
      }
    }

  });
});

＆＃13;

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

＆＃13;

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

1 个答案: