訪問Javascript節點列表中的項目以更改圖像

Question

我正在嘗試使用Javascript代碼創建與CSS Hover相同的效果（用於學習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>

僅用Java腳本回答並附有解釋。 沒有jQuery

Answer 1

您可以通過以下示例更簡單的方式進行操作：

 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'/>

無論您添加多少圖像，此代碼都將起作用。 它消除了您向HTML添加對JS函數（您可以選擇更改其名稱）的調用，不需要與JS中的DOM混淆，不需要在JS中循環。 就CSS而言，它沒有使用id進行樣式設計，因此避免了特殊性問題。

Answer 2

您的問題似乎在頂部， 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樹 ，並且當您可能想分配一個String時，您還試圖將一個節點分配為src 。
```
 // 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.addEventListner(type, event_handler)其中foo是您要將event_handler附加到每個節點的引用。 這將讓你訪問鼠標懸停或鼠標移開事件更詳細，特別是如果event_handler看着它，這將是事件本身，或者第一個參數this ，這將是它調用的處理節點。

始終將控制台作為調試的第一步，通常可以使您迅速將問題縮小到問題所在的確切范圍。

訪問Javascript節點列表中的項目以更改圖像

問題描述

2 個解決方案

解決方案1
2 已采納 2015-03-27 00:22:28

解決方案2
1 2015-03-27 00:14:40

訪問Javascript節點列表中的項目以更改圖像

問題描述

2 個解決方案

解決方案1 2 已采納 2015-03-27 00:22:28

解決方案2 1 2015-03-27 00:14:40

解決方案1
2 已采納 2015-03-27 00:22:28

解決方案2
1 2015-03-27 00:14:40