單擊具有相同名稱的按鈕時，我需要更改多個 div 的樣式。我有一個按鈕，可以在其中創建帶有影像的 div。
這是創建 div 的代碼
function creatContent(e) {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;
var img = $('<img src="indeksiraj-1.png" alt="如何在單擊按鈕時更改多個 div 的樣式" />');
$(divMark).append(img);
$(marksCanvas).append(divMark);
}
當我創建 div 時，我可以在瀏覽器上拖動該 div。現在我需要更改 div 的樣式，但是當我按下按鈕創建兩個或更多 div 時，我只更改最后一個 div 的樣式，其他 div 保持不變。
這是所有內容的代碼：
var xCord;
var yCord;
var xLeft = 0;
var yTop = 0;
function creatContent(e) {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;
var img = $('<img src="indeksiraj-1.png" alt="如何在單擊按鈕時更改多個 div 的樣式" />');
$(divMark).append(img);
window.onload = addListeners();
function addListeners() {
divMark.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup", mouseUp, false);
}
function mouseUp() {
window.removeEventListener("mousemove", divMove, true);
}
function mouseDown(e) {
window.addEventListener("mousemove", divMove, true);
}
function divMove(e) {
xCord = e.pageX;
yCord = e.pageY;
divMark.style.top = yCord "px";
divMark.style.left = xCord "px";
}
zoomIn.onclick = function () {
var myImg = document.getElementById("the-canvas");
var currWidth = myImg.clientWidth;
if (currWidth == 1200) return false;
else {
myImg.style.width = currWidth 100 "px";
}
xLeft = xCord 25;
yTop = yCord 22;
divMark.style.left = xLeft "px";
divMark.style.top = yTop "px";
xLeft -= xCord;
yTop -= yCord;
};
zoomOutBtn.onclick = function () {
var myImg = document.getElementById("the-canvas");
var currWidth = myImg.clientWidth;
if (currWidth == 800) return false;
else {
myImg.style.width = currWidth - 100 "px";
}
xLeft = xCord - 25;
yTop = yCord - 22;
divMark.style.left = xLeft "px";
divMark.style.top = yTop "px";
xLeft -= xCord;
yTop -= yCord;
};
}
這是演示https://jsfiddle.net/SutonJ/5gyqexhj/18/
uj5u.com熱心網友回復：
當您指divmark的是movediv函式時，您指的是您制作的最后一個 div。相反，您應該參考該 div 的類，因為如果我理解正確，您制作的所有 div 都具有相同的類。因此，您可以使用 jquery 將樣式添加到類中，如下所示：
$('.markers').css({'top': yCord "px", 'left': xCord "px"})
這將為所有具有 class 的元素添加樣式markers。如果您有該類的其他元素，您不想擁有這些樣式，那么您應該為您創建的那些 div 添加一個獨特的類divmark.classList。
uj5u.com熱心網友回復：
你應該使用document.getElementsByClassName('<name of class>')
這樣，所有具有類名的 div 都會受到事件的影響。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421159.html
標籤：
上一篇：兩個元素不在移動視圖中居中