So erstellen Sie eine Schaltfläche mit aktivem Schalter mit Javascript

Question

Ich möchte eine Umschaltfläche aus acht Schaltflächen erstellen. Wenn sieben der Umschaltknöpfe angeklickt werden, schaltet es zwei Klassen um (und ändert seine CSS-Stile). Wenn man auf die Schaltfläche (die tägliche Schaltfläche) der Umschaltflächen klickt, werden die Stile der anderen sieben umgeschaltet.

Dies ist mein Code:

Die toggleclass (this) Funktion I schaltet den class1 zu einem class2 CSS Stil vorgegeben.

ich versucht, dieses

<div id="menu1"> 

$(document).ready(function() { 

$('#hey').click(function() 
{ 
     if($('#btnDiv,#btnDiv1,#btnDiv2,#btnDiv3,#btnDiv4,#btnDiv5,#btnDiv6').hasClass('class1')){ 
    $('#btnDiv,#btnDiv1,#btnDiv2,#btnDiv3,#btnDiv4,#btnDiv5,#btnDiv6').toggleClass('class2') 
    }else{ 
    $('#btnDiv,#btnDiv1,#btnDiv2,#btnDiv3,#btnDiv4,#btnDiv5,#btnDiv6').toggleClass('class2') 
    } 

}); 

}); 



         <div class="cols"><button id="btnDiv" onclick="toggleclass(this);monday();" class="class1"><h5>MONDAY</h5></button></div> 
         <div class="cols"><button id="btnDiv1" onclick="toggleclass(this);tuesday();" class="class1"><h5>TUESDAY</h5></button></div> 
         <div class="cols"><button id="btnDiv2" onclick="toggleclass(this);wednesday();" class="class1"><h5>WEDNESDAY</h5></button></div> 
         <div class="cols"><button id="btnDiv3" onclick="toggleclass(this);thursday();" class="class1"><h5>THURSDAY</h5></button></div> 
         <div class="cols"><button id="btnDiv4" onclick="toggleclass(this);friday();" class="class1"><h5>FRIDAY</h5></button></div> 
         <div class="cols"><button id="btnDiv5" onclick="toggleclass(this);saturday();" class="class1"><h5>SATURDAY</h5></button></div> 
         <div class="cols"><button id="btnDiv6" onclick="toggleclass(this);sunday();" class="class1"><h5>SUNDAY</h5></button></div> 
         <div class="cols"><button id="hey" onclick="toggleclass(this);daily();showdaily();" class="class1"><h5>DAILY</h5></button></div> 

tun, aber es funktioniert nicht. Helfen Sie mir bitte

Was muss ich tun, um die tägliche Taste, um die Stile der anderen Tasten zu ändern (wenn sie angeklickt werden) in die Klasse 1, wenn darauf geklickt und zurück wechseln wieder

eine einfache Antwort auf CLASS2 roh verwenden JavaScript wirklich geschätzt werden würde, wie ich JavaScript ziemlich neu bin .. :)

Answer 1

Wenn Sie dies als eine "Lernübung" tun, tun Sie sich selbst keinen Gefallen mit all dem zusätzlichen HTML darin. Ich würde sogar so weit gehen, die Divs mit jedem Knopf loszuwerden, aber das bin nur ich.

Also werde ich einen Ausgangspunkt posten, aber das ist nur eine Off-the-Cuff-Sache, YMMV. Gehen Sie logischerweise durch das, was Sie eigentlich wollen: Wenn Sie auf eine Schaltfläche klicken, möchten Sie ALLE anderen Schaltflächen auf "class1" setzen und dann die aktuell angeklickte Schaltfläche auf "class2" setzen. Recherchieren Sie mit dem JavaScript classList Attribut, es ist sehr praktisch dafür.

Ich habe dies bearbeitet, wie Sie die angeklickte Schaltfläche TOGGLE, so dass jetzt der Code alle Geschwister-Schaltflächen zurück auf die Klasse1 setzt, aber dann die letzten beiden Zeilen tatsächlich schalten Sie die Klasse1/Klasse2, anstatt die Schaltfläche zu erzwingen auf. Weitere Informationen dazu, was Sie mit classList tun können, finden Sie unter this.

Das dritte Mal durch. Sie möchten nicht nur in der Lage sein, die Klassen zu wechseln, sondern möchten, dass Sie alle auswählen, um die Auswahl von allem umzuschalten? Schalten Sie sie alle ein, schalten Sie sie alle aus oder schalten Sie sie einfach um? Ich habe es so, dass das Klicken auf "Täglich" alle ausgewählten Schaltflächen umschaltet. Auch hier weitgehend aus dem Stegreif und größtenteils hier spielend.

Basierend auf Ihrem Kommentar, klicken Sie auf "Täglich" schaltet alle Tag-Schaltflächen auf Klasse1. Ich habe den Abschnitt in der Tagesverarbeitung auskommentiert, um die Tagesauswahl exklusiv zu machen, aber sie ist immer noch da, wenn du sie brauchst.

// First, store references to the bits we'll manipulate. 
 
var menu = document.querySelector("#menu1"); 
 
var dayBtnEls = document.querySelectorAll(".day-button"); 
 
var allBtnEl = document.querySelector("#hey"); 
 

 
// Now, rather than adding them in the HTML, I'll 
 
// attach my event listeners. The menu listens 
 
// for clicks on the buttons, and the '#hey' button 
 
// also has a listener. I could have done it all 
 
// within that single menu listener, as that is 
 
// also checking if the clicked button is #hey, but 
 
// I figured "what the hey..." 
 
menu.addEventListener("click", toggleDays); 
 
allBtnEl.addEventListener("click", toggleAll); 
 

 
/**** 
 
* Without knowing for sure, I've simply set the 
 
* toggleAll function to go through all the day 
 
* buttons and toggle their class1/class2. So having 
 
* one of the buttons selected and clicking 'Daily' 
 
* will leave all but that one selected. 
 
* It's really up to you what you want for the toggle 
 
* behavior, this is mostly just an example of what 
 
* you COULD do. 
 
****/ 
 
function toggleAll(event){ 
 
    if (event.target.innerText == "Select All") { 
 
    // go through all the day button els. 
 
    for (var i=0; i<dayBtnEls.length; i++){ 
 
    // toggle their class1/class2 
 
    dayBtnEls[i].classList.add("class1"); 
 
    dayBtnEls[i].classList.remove("class2"); 
 
    } 
 
    event.target.innerText = "Deselect All"; 
 
    } else { 
 
    // go through all the day button els. 
 
    for (var i=0; i<dayBtnEls.length; i++){ 
 
    // toggle their class1/class2 
 
    dayBtnEls[i].classList.remove("class1"); 
 
    dayBtnEls[i].classList.add("class2"); 
 
    } 
 
    event.target.innerText = "Select All"; 
 
    } 
 
} 
 

 
/**** 
 
* again, without knowing what you're trying to do, 
 
* I've set it so that clicking on a day button 
 
* forces all the other day buttons to be toggled 
 
* back to class1, then the clicked element will 
 
* toggle back-and-forth from class1 to class2. 
 
****/ 
 
function toggleDays(event){ 
 
    // as we're listening at the menu level, and #hey 
 
    // is a child of menu, we need to filter that out. 
 
    if(event.target.id != "hey") { 
 
    var thisDayEl = event.target; 
 
    /**** 
 
    * I'm commenting out this section, as it seems you 
 
    * don't want to have it be an exclusive toggle. 
 
    * I don't want to delete it yet, as I don't know 
 
    * for sure, but. 
 
    * 
 
    // set ALL buttons back to class 1... 
 
    for (var i=0; i<dayBtnEls.length; i++){ 
 
    if(dayBtnEls[i] != thisDayEl) { 
 
    dayBtnEls[i].classList.remove("class2"); 
 
    dayBtnEls[i].classList.add("class1"); 
 
    
 
    } 
 
    } 
 
    ****/ 
 
    
 
    // Now, set just the clicked button to class2 
 
    thisDayEl.classList.toggle("class2") 
 
    thisDayEl.classList.toggle("class1"); 
 
    } 
 
}

.class1 { 
 
    color: #333; 
 
    background-color: #ccc; 
 
} 
 
.class2 { 
 
    color: #ccc; 
 
    background-color: #333; 
 
} 
 
.cols { 
 
float: left; 
 
} 
 
.cols button { 
 
    height: 50px; 
 
}

<div id="menu1"> 
 

 
    <div class="cols"> 
 
    <button id="btnDiv" class="day-button class1">MONDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv1" class="day-button class1">TUESDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv2" class="day-button class1">WEDNESDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv3" class="day-button class1">THURSDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv4" class="day-button class1">FRIDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv5" class="day-button class1">SATURDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv6" class="day-button class1">SUNDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="hey" class="all-button class1">Select All</button> 
 
    </div> 
 
    </div>

die gleiche Sache mit dem Code tun, mit einigen sehr geringfügigen Änderungen. Im Grunde, anstatt dieser wirklich langen Auswahlliste, habe ich allen Tagesknöpfen eine weitere Klasse hinzugefügt und verwende THAT, um sie zu sammeln.Ich habe einen Listener für die Tag-Buttons hinzugefügt, auf die geklickt wurde, die einfach ihre class1/class2 schalten, und die if-Anweisung, die du im täglichen Button-Handler hattetest, tat dasselbe in beiden Fällen, also habe ich das if einfach los. Hier ist dieses Beispiel:

$(document).ready(function() { 
 
    $(".day-button").on("click", function() { 
 
    $(this).toggleClass("class1").toggleClass("class2"); 
 
    }) 
 
    $('#hey').click(function() { 
 
    $('.day-button').removeClass('class2').addClass("class1"); 
 
    }); 
 
});

.class1 { 
 
    color: #333; 
 
    background-color: #ccc; 
 
} 
 

 
.class2 { 
 
    color: #ccc; 
 
    background-color: #333; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu1"> 
 

 
    <div class="cols"> 
 
    <button id="btnDiv" class="day-button class1">MONDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv1" class="day-button class1">TUESDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv2" class="day-button class1">WEDNESDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv3" class="day-button class1">THURSDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv4" class="day-button class1">FRIDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv5" class="day-button class1">SATURDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="btnDiv6" class="day-button class1">SUNDAY</button> 
 
    </div> 
 
    <div class="cols"> 
 
    <button id="hey" class="all-button class1">DAILY</button> 
 
    </div> 
 
</div>

Answer 2

Sie so etwas tun könnte:

<style> 
    .class1 { 
    color: red; 
    } 
    .class2 { 
    color: green; 
    } 
</style> 

<div> 
<button class="class1" onclick="changeClass(event)">Click me</button> 
<button class="class1" onclick="changeClass(event)">Click me</button> 
</div> 

<script> 
function changeClass(e) { 
    if (e.target.className.trim() === 'class1') { 
    e.target.className = 'class2'; 
    } else { 
    e.target.className = 'class1'; 
    } 
} 

</script> 

Arbeitsbeispiel: https://jsfiddle.net/g12ua8d1/