如何在单击按钮时更改多个 div 的样式

Question

我需要在单击具有相同 name.I 的按钮时更改多个 div 的样式，其中包含我创建 div 图像的按钮。

这是创建 div

的代码

function creatContent(e) {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;

var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />');

$(divMark).append(img);
$(marksCanvas).append(divMark);
}

当我创建 div 时，我可以将 div 拖到 browser.Now 我需要更改 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 class="comment" src="indeksiraj-1.png" alt="myimage" />');

$(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/

Answer 1

你应该使用document.getElementsByClassName('<name of class>')

这样所有名称为 class 的 div 都会受到该事件的影响。

Answer 2

当您在 movediv 函数中引用 divmark 时，您指的是您创建的最后一个 div。相反，您应该参考那个 div 的 class，因为如果我理解正确的话，您制作的所有 div 都具有相同的 class。因此，您可以使用 jquery 将样式添加到 class，如下所示：

$('.markers').css({'top': yCord + "px", 'left': xCord + "px"})

这会将样式添加到具有 class markers 的所有元素。如果您有其他元素 class 而您不想拥有这些样式，那么您应该为您在 divmark.classList 制作的那些 div 添加一个独特的 class。

如何在单击按钮时更改多个 div 的样式

How to change style of multiple div on click of a button

html

javascript

css

jquery

zooming