我想创建一个包含八个按钮的切换按钮。如果单击切换按钮中的七个，则切换两个类（并更改它的CSS样式）。 如果单击切换按钮中的一个（每日按钮），则切换其他七个样式。
这是我的代码：
我预定义的toggleclass（this）函数将class1切换为class2 CSS样式。
我试过这个
<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>
但它不起作用。请帮帮我
如何点击其他按钮（如果点击的话）将其更改为第1类，并再次更改回class2，我该怎么做
使用原始JavaScript的直截了当的答案将非常受欢迎，因为我对JavaScript很陌生......：）
答案 0 :(得分：0)
你可以这样做：
<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>
答案 1 :(得分：0)
如果您将此作为一项学习练习，那么，＃34;那么你就不会对所有额外的HTML有所帮助。我甚至可以摆脱包含每个按钮的div，但那只是我。
所以我会发布一个起点，但这只是一个袖手旁观的事情，YMMV。从逻辑上讲，逐步了解您实际想要发生的事情：单击按钮时，您要将所有其他按钮设置为＆＃34; class1＆＃34;，然后您要将当前单击的按钮设置为＆＃34; class2＆ ＃34 ;.使用javascript classList属性进行研究，对此非常方便。
我编辑了这个，因为你正在寻找TOGGLE单击按钮，所以现在代码将所有兄弟按钮设置回class1，但最后两行实际上切换了class1 / class2而不是强制按钮。有关classList的更多信息，请查看this。
第三次通过。您不仅希望能够切换类，还希望选择所有按钮来切换所有内容的选择？将它们全部打开，将它们全部关闭，或者只是切换每一个？我已经得到它，以便点击“每日”。将切换所有选定的按钮。再次，很大程度上是袖手旁观，并且主要在这里玩。
根据您的评论，点击＆＃39;每日＆＃39;将所有日期按钮切换到class1。我已经注释了当天处理的部分，以使日期选择成为独家，但如果您需要，它仍然存在。
// 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>
使用您的代码执行相同的操作，只需进行一些非常小的更改。基本上，我没有那么长的选择器列表，而是在日常按钮中添加了另一个类，我使用它来收集它们。我添加了一个监听器，用于点击日期按钮，只需切换它们的class1 / class2，而你在日常按钮处理程序中的if语句在两种情况下都做同样的事情，所以我只是摆脱了if。这是一个例子：
$(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>