How to find the element with an attribute and change the attribute value in javascript?

问题: function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev)...

问题:

function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
  }

  function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" />

After dropping the image how can i change the attribute value draggable="true" to draggable="false" by finding the available elements with attribute draggable="true" inside the function drop() ?


回答1:

Use querySelectorAll to get all the elements having draggable set to true. using setAttribute set draggable to false

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
  var elem = document.querySelector('.className');
  elem.querySelectorAll('[draggable="true"]').forEach(e => e.setAttribute('draggable', false))
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" />


回答2:

I would use querySelectorAll and setAttribute

document.querySelectorAll('[draggable="true"]').forEach(elem =>
  elem.setAttribute("draggable",false)
);

Older JS

var elems = document.querySelectorAll('[draggable="true"]');
for (var i=0;i<elems.length;i++) {
  elems[i].setAttribute("draggable",false);
}

Using a class:

document.querySelectorAll('.someClass[draggable="true"]')

回答3:

You can use

document.querySelectorAll('[draggable="true"]');

in order to find elements with a certain attribute.

Note that this works only for HTML attributes, for classes you shall use

document.querySelectorAll('.classname[draggable="true"]')
  • 发表于 2019-03-20 11:29
  • 阅读 ( 202 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除