Necesito cambiar el estilo de múltiples divs al hacer clic en un botón que tiene el mismo nombre. Tengo el botón donde creo div con imagen.
Este es el código para crear el 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); }Cuando creo div, puedo arrastrar ese div en el navegador. Ahora necesito cambiar el estilo de div, pero cuando creo dos div o más cuando presiono el botón, cambio el estilo solo del último div, otro div permanece igual.
Este es el código para todo:
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; }; }Esta es una demostración https://jsfiddle.net/SutonJ/5gyqexhj/18/
Debe usar document.getElementsByClassName('<name of class>')
De esa forma, todos los divs con el nombre de la clase se verán afectados por el evento.
Cuando se refiere a divmark en la función movediv , se refiere al último div que hizo. En su lugar, debe referirse a una clase de ese div ya que todos los divs que hizo tienen las mismas clases si entiendo correctamente. Entonces puede usar jquery para agregar el estilo a la clase así:
$('.markers').css({'top': yCord + "px", 'left': xCord + "px"}) Eso agregará el estilo a todos los elementos que tienen los markers de clase. Si tiene otros elementos con esa clase que no desea tener esos estilos, debe agregar una clase única para esos divs que hizo en divmark.classList .