我想創建 31 個按鈕，并可以選擇更改每個按鈕的背景顏色。問題是當我嘗試更改按鈕 2 的顏色時，它會更改按鈕 1 的顏色。我想做的就是在圖片?《十字》中。function myFunctionRed()? {? ? document.getElementById("myBtn").style.background = "green";? }? function myFunctionGreen()? {? ? document.getElementById("myBtn").style.background = "yellow";? }? function myFunctionBlue()? {? ? document.getElementById("myBtn").style.background = "red";? }// Get the modalvar modal = document.getElementById("myModal");var modal2 = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("myBtn");var btn2 = document.getElementById("myBtn2");// Get the <span> element that closes the modal// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks the button, open the modalbtn.onclick = function(){? modal.style.display = "block";}btn2.onclick = function(){? modal.style.display = "block";}// When the user clicks on <span> (x), close the modalspan.onclick = function(){? modal.style.display = "none";}// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event){? if (event.target == modal)? {? ? modal.style.display = "none";? }}? <button id="myBtn">1</button>? <button id="myBtn2">2</button>? <div id="myModal" class="modal">? ? <div class="modal-content">? ? ? <span class="close">×</span>? ? ? <button id="demo1" onclick="myFunctionRed()">Red</button>? ? ? <button id="demo2" onclick="myFunctionGreen()">Green</button>? ? ? <button id="demo3" onclick="myFunctionBlue()">Blue</button>? ? </div>? </div>
3 回答
小唯快跑啊
TA貢獻1863條經驗 獲得超2個贊
它改變按鈕 1 的顏色
這是因為您僅明確提及按鈕 1 id。而不是id先上課然后使用querySelectorAll. 將事件偵聽器添加到按鈕并從中獲取目標意味著獲取被單擊的按鈕。
創建單個函數來更改顏色并將顏色作為函數的參數傳遞。
var modal = document.getElementById("myModal");
let targetBtn;
document.querySelectorAll('.myBtn').forEach((item) => {
item.addEventListener('click', (e) => {
modal.classList.toggle('hide');
targetBtn = e.target;
})
})
function myFunction(color) {
if (targetBtn) {
targetBtn.style.background = color;
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.modal {
display: block;
background: #efefef;
border: 1px solid black;
width: 240px;
height: 100px;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.myBtn {
background-color: gray;
border: 0.5px solid black;
color: white;
width: 30px;
height: 30px;
border-radius: 10%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#demo1 {
background-color: red;
border: none;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#demo2 {
background-color: green;
border: none;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#demo3 {
background-color: blue;
border: none;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.hide {
display: none;
}
<button class="myBtn">1</button>
<button class="myBtn">2</button>
<div id="myModal" class="modal hide">
<div class="modal-content">
<span class="close">×</span>
<button id="demo1" onclick="myFunction('red')">Red</button>
<button id="demo2" onclick="myFunction('green')">Green</button>
<button id="demo3" onclick="myFunction('blue')">Blue</button>
</div>
</div>
一只甜甜圈
TA貢獻1836條經驗 獲得超5個贊
您好嘗試使用我的代碼：
// variable to track which button is activated
var activeButton = null;
function myFunctionRed() {
document.getElementById(activeButton).style.background = "green";
}
function myFunctionGreen() {
document.getElementById(activeButton).style.background = "yellow";
}
function myFunctionBlue() {
document.getElementById(activeButton).style.background = "red";
}
// Get the modal
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
// will make sure to return the color to gray
btn2.style.backgroundColor = "gray";
// set the value to myBtn
activeButton = "myBtn";
};
btn2.onclick = function() {
modal.style.display = "block";
// will make sure to return the color to gray
btn.style.backgroundColor = "gray";
// set the value to myBtn2
activeButton = "myBtn2";
};
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
汪汪一只貓
TA貢獻1898條經驗 獲得超8個贊
所有處理函數都在尋找 id 為myBtn第一個按鈕的元素。您需要獲取 clickhandler 內部的 dom 事件，解析 targetElement，然后設置該元素的樣式。
- 3 回答
- 0 關注
- 168 瀏覽
添加回答
舉報
0/150
提交
取消