访问 Javascript 节点列表中的项目以更改图像

Question

我正在尝试创建与 CSS 悬停相同的效果，但使用 Javascript 代码（为了学习 Javascript 和将来使用）。所以在鼠标悬停时，我希望单个图像增加不透明度。

我在下面编写的代码不起作用。请参阅有关我正在尝试做的事情的评论；

<script>
//gets all img tags (qu.20)

var images = document.getElementsByTagName("img")

// Create new element with id "newNode" for the individual node to go into

var node = document.body.createElement("newNode")

// Add the new element into the html document

document.body.appendChild(newNode)

// Attach var i to the individual nodes and set src of new element as that node

function overImage () {
    for (var i=0; i<images.length; i++) {
    document.getElementById("newNode")
    document.body.newNode.src = images.item(i)  
    }
}

// function to create a new class with same attributes as original when mouse leaves image

function leaveImage () {
    for (var i=0; i<images.length; i++) {
    document.getElementById("newNode")
    document.body.newNode.src = images.item(i)
    document.body.newNode.className = " leave"
    }
}

</script>

<html>
<img src="image1.gif" onmouseover="overImage()" onmouseout="leaveImage()" alt="image" />
<img src="image2.gif" onmouseover="overImage()" onmouseout="leaveImage()" alt="image" />
</html>

<style>
img { opacity:0.5; }
#newNode { opacity:1; }
#newNode.leave { opacity:0.5; }

作为替代方案，此代码仅适用于所有图像（即它们一起改变不透明度，而不是单独改变。

<script>
 function overImage () {
var selectImage = document.getElementsByTagName("img")
for (var i=0; i<selectImage.length; i++) {
selectImage[i].className = " over"
}
}

function leaveImage () {
var selectImage = document.getElementsByTagName("img")
for (var i=0; i<selectImage.length; i++) {
selectImage[i].className = ""
}
}
</script>

<style>
img { opacity:0.5; }
.over { opacity:1; }
</style>

Javascript中的答案请附上解释。没有jquery

Answer 1

您的问题似乎在顶部，document.body.createElement("newNode") 会给您 TypeError: undefined is not a function。 createNode 方法在 #document 节点上，而不是 HTMLElement.

接下来，您通过标签名称创建节点，没有这样的标签<newNode>，也许您打算创建一个<img>

var node = document.createElement("img");

现在需要给它分配id属性，

node.setAttribute('id', 'newNode');

接下来，您必须将 node 附加到您的文档树中（您目前正在尝试附加一个未定义的变量 newNode）

document.body.appendChild(node);

最后，你的两个函数 overImage 和 leaveImage 都有自己的几个问题；

他们正在执行 document.getElementById 但不记得结果，而是试图以一种不寻常的方式遍历 DOM 树 并且您正在尝试将节点分配为 src，而您可能想分配 String[=66] =]

// outside loop var node = document.getElementById("newNode"); // inside loop node.src = images.item(i).src;

它们每次都遍历所有 images，这意味着您最终总是会得到 node 的 src 指向images
中最后一项的值

尝试使用 foo.addEventListner(type, event_handler) 链接这些侦听器，其中 foo 是对要将 event_handler 附加到的每个节点的引用。这将使您可以更详细地访问 mouseover 或 mouseout 事件，尤其是当 event_handler 查看它的第一个参数时事件本身，或 this 将成为调用处理程序的节点。

始终将检查您的控制台作为调试的第一步，它通常可以让您快速缩小问题范围，找到与问题相关的确切行

Answer 2

您可以通过更简单的方式执行此操作，请查看此示例：

var f = function(e) {
  
  // the event target, can be any element in the page at this point
  var t = e.target;
  
  // check if the event target is an img element
  if(t.tagName.toLowerCase() == 'img') {
    
    // then toggle its active class
    t.classList.toggle('active');
  }
}

// add listeners to the window (or on whatever image container you have)
addEventListener('mouseover', f /* call this function f on mouseover */, false);
addEventListener('mouseout', f, false);

img { opacity: .5; }
.active { opacity: 1; }

<img src='http://i.imgur.com/kk7fJccs.jpg'/>
<img src='http://i.imgur.com/kk7fJccs.jpg'/>
<img src='http://i.imgur.com/kk7fJccs.jpg'/>
<img src='http://i.imgur.com/kk7fJccs.jpg'/>
<img src='http://i.imgur.com/kk7fJccs.jpg'/>

无论您在此之后添加多少张图片，此代码都将起作用。它消除了您将对 JS 函数（您可以选择更改其名称）的调用添加到 HTML、从 JS 中弄乱 DOM 的需要、在 JS 中循环的需要。就 CSS 而言，它没有使用 id 进行样式设置，因此避免了特异性问题。

访问 Javascript 节点列表中的项目以更改图像

Accessing items in Javascript Node List to alter image

javascript

image

getelementsbytagname