我有一组4个按钮，用于显示/隐藏页面内的所有图像-它们做得很好。当单击单个按钮时，它会将内部按钮文本从"HIDE all"更改为"隐藏全部"。to "DISPLAY ALL"
但是，所有其他按钮保持不变。
我怎么能让所有其他按钮改变文本，以及?
到目前为止，我尝试了这个，它一次只工作一个按钮-我想要一次更改所有按钮:
$('.HideDisplay').click(function() {
var $this = $(this);
$this.toggleClass('HideDisplay');
if ($this.hasClass('HideDisplay')) {
$this.text('HIDE ALL');
$(this).css('color', 'black');
$(this).css("background-color", "#f1f1f1");
$(this).hover(function() {
$(this).css("background-color", "#dedede");
}, function() {
$(this).css("background-color", "#f1f1f1");
});
} else {
$this.text('DISPLAY ALL');
$(this).css('color', 'white');
$(this).css("background-color", "#009E60");
$(this).hover(function() {
$(this).css("background-color", "#008000");
}, function() {
$(this).css("background-color", "#009E60");
});
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
</head>
<body>
<p><button id="button" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button2" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button3" class="HideDisplay">HIDE ALL </button></p>
<p><button id="button4" class="HideDisplay">HIDE ALL</button></p>
</pre>
</body>
</html>在这种情况下，您需要使用选择器"button[id*='button']"去改变你所有的按钮因为如果你用selector by class它会在第一次工作但当你点击第二次时不要因为类会被toggleClass功能移除。此外，您需要使用相同的选择器更改显示文本，并在如果您可以设置一个带有您想要使用的标签的变量，请检查下面的代码:
$('.HideDisplay').click(function() {
var $this = $(this);
var textToDisplay = '';
if (!$this.hasClass('HideDisplay')) {
textToDisplay = 'HIDE ALL';
$this.css('color', 'black');
$this.css("background-color", "#f1f1f1");
$this.hover(function() {
$this.css("background-color", "#dedede");
}, function() {
$this.css("background-color", "#f1f1f1");
});
} else {
textToDisplay = 'DISPLAY ALL';
$this.css('color', 'white');
$this.css("background-color", "#009E60");
$this.hover(function() {
$(this).css("background-color", "#008000");
}, function() {
$(this).css("background-color", "#009E60");
});
}
$("button[id*='button']").toggleClass('HideDisplay');
$("button[id*='button']").text(textToDisplay);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
</head>
<body>
<p><button id="button" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button2" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button3" class="HideDisplay">HIDE ALL </button></p>
<p><button id="button4" class="HideDisplay">HIDE ALL</button></p>
</pre>
</body>
</html>不是使用id来选择元素并单独进行更改，而是有一种替代方法，使用querySelectorAll()使用更干净的代码，允许您选择具有特定类的所有元素，然后使用循环对所有元素进行所有所需的更改。
考虑以下纯JavaScript
$('.HideDisplay').on('click', function(){
const btns = document.querySelectorAll('.HideDisplay');
for(btn of btns){
if(btn.innerText === 'HIDE ALL'){
btn.innerText = 'DISPLAY ALL';
btn.style.backgroundColor = 'green';
btn.style.color = 'white';
}
else{
btn.innerText = 'HIDE ALL';
btn.style = null;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button class="HideDisplay">HIDE ALL</button></p>
<p><button class="HideDisplay">HIDE ALL</button></p>
<p><button class="HideDisplay">HIDE ALL </button></p>
<p><button class="HideDisplay">HIDE ALL</button></p>