在多個部分中的Onmousehover

Question

我想使用js onmousehover將鼠標懸停在圖像上，並在單獨的固定位置告訴我所述圖像的名稱。我已經成功地做到了這一點，但是我只能在第一個元素上工作，當我有六個需要做的事時。這裏是我的代碼示例：

function getElementsById(ids) { 
    var idList = ids.split(" "); 
    var results = [], item; 
    for (var i = 0; i < idList.length; i++) { 
     item = document.getElementById(idList[i]); 
     if (item) { 
      results.push(item); 
     } 
    } 
    return(results); 
} 

function hover(description) { 
    console.log(description); 
    document.getElementsById('content content1').innerHTML = description; 
} 

，並調用它，我一直在使用這樣的：

<div class="product-description-box"> 
    <p> 
     <div class="colorHeading">colors available: <span class="selectedColor" id="content"></span></div> 
     <div class="prodColors"></div> 
    </p> 
</div> 

我使用不同的ID對每個部分。 Js肯定不是我強大的西裝，所以任何幫助將不勝感激！

Answer 1

做的更快的方法就是拉你的元素集合，然後將其轉換成一個數組：

像這樣：

[].slice.call(document.getElementsByClassName("box")) 
    .forEach(function(element) {element.addEventListener("mouseover", checkBoxColor);}); 

這對HTML元素的集合調用片由getElementsByClassName返回以將其轉換爲數組。之後，我運行forEach方法將事件偵聽器添加到每個HTML元素。

小提琴：https://jsfiddle.net/0saLvq2q/

在你的情況，如果您需要返回由許多不同的ID的多個元素，你可以使用querySelectorAll（）拉元素，而不是getElementsByClassName方法（）。

Answer 2

'ids'不是自動列表。你想要使用的是Arguments Object。

function getElementsById() { 
var i, results = [], item; 
    for (i = 0; i < arguments.length; i++) { 
    item = document.getElementById(arguments[i]); 
    if (item) { 
     results.push(item); 
    } 
} 
return(results);