Wie erstelle ich zwei verschiedene Schaltflächengruppen

Ich erstelle zwei Schaltflächengruppen. Immer wenn ich auf eine Schaltfläche aus der zweiten Schaltflächengruppe klicke, wird die bereits ausgewählte Schaltfläche aus der 1. Gruppe abgewählt. Ich kann nur eine Taste für beide Gruppen auswählen. Ich möchte aus jeder Gruppe eine Schaltfläche auswählen.Wie erstelle ich zwei verschiedene Schaltflächengruppen

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

Quelle

2017-07-21 passionFinder

Könnten Sie es klar ausgedrückt? Was ich von oben bekommen habe, ist, wenn der Benutzer auf Englisch (Betreff) klickt, dann automatisch entweder die Klasse (I, II oder III) ausgewählt wird, ist das richtig? –

Ridoan, Benutzer möchte aus jeder Gruppe eine Schaltfläche auswählen. Der Benutzer möchte beispielsweise auf Englisch aus dem Thema und II auf die Klasse klicken. Wenn er auf Klasse II klickt, wird Englisch deaktiviert. Benutzer kann einen Knopf von allen wählen ... Hoffe, das klärt .. – passionFinder

Schritt für Schritt zu bekommen dies getan:

Fügen Sie eine Klasse auf eine ausgewählte Schaltfläche, die Benutzer geklickt nur
$(this).addClass("selected");
benutzerdefinierte CSS für die ausgewählte Schaltfläche erstellen (die wir ausgewählt named).
.selected { background-color: #A8A8A8; color: #FFFFFF; }
Ermitteln der ID des übergeordneten Elements der Schaltfläche.
group = $(this).parent().attr('id');
Erhalten Sie alle untergeordneten Elemente des übergeordneten Elements der Schaltfläche, die ausgewählt wurde. Dann speichern Sie diese Variablen, die childClasses benannt haben.
childClasses = $("#" + group).children();
Überprüfen Sie, ob vorherige Schaltflächen in derselben Gruppenschaltfläche ausgewählt wurden. Falls vorhanden, entferne einfach die 'ausgewählte' Klasse von diesen Elementen.

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

Sie auch aus dem Quellcode lernen könnte ich unten zur Verfügung gestellt haben. Ich hoffe das hilft dir.

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

Quelle

2017-07-23 17:29:53

Hallo Ridoan, Wenn ich einen Knopf von der zweiten Gruppe anklicke, wird die erste Gruppenauswahl entfernt ... das Problem rainains noch. – passionFinder

@passionFinder .. i habe es behoben. Schau es dir einfach an. –

Danke Ridoan .. Es funktioniert gut ... – passionFinder

Wie erstelle ich zwei verschiedene Schaltflächengruppen

Antwort

Verwandte Themen