將文字懸停在文字上/不使用jQuery

Question

我正在製作一個作爲學校項目的投資組合頁面。我的想法是在下面有一個帶有標題的圖像，並且每當我將鼠標懸停在標題上（假設設計手冊，動畫，故事板等都會有標題），圖像將變爲與可點擊的標題相對應的圖像並會導致一個關於所選主題的更多信息的子頁面。我不能使用任何jQuery，但只有JavaScript。 我寫了這段代碼正在工作，但它太長了，我想知道是否有更短的可能性。我在想帶開關功能的數組？不過，我對JavaScript非常陌生，所以當我嘗試時我無法將它放在一起。任何幫助表示讚賞。

let thumbnail = document.querySelector("#thumbN"); 

let buttonOne = document.querySelector("#ButtonOne"); 
let buttonTwo = document.querySelector("#ButtonTwo"); 
let buttonThree = document.querySelector("#ButtonThree"); 
let buttonFour = document.querySelector("#ButtonFour"); 
let buttonFive = document.querySelector("#ButtonFive"); 
let buttonSix = document.querySelector("#ButtonSix"); 
let buttonSeven = document.querySelector("#ButtonSeven"); 
let buttonEight = document.querySelector("#ButtonEight"); 
let buttonNine = document.querySelector("#ButtonNine"); 
let buttonTen = document.querySelector("#ButtonTen"); 

buttonOne.addEventListener("mouseover", doBackgroundOne); 
buttonOne.addEventListener("mouseout", removeBackOne); 

buttonTwo.addEventListener("mouseover", doBackgroundTwo); 
buttonTwo.addEventListener("mouseout", removeBackTwo); 

buttonThree.addEventListener("mouseover", doBackgroundThree); 
buttonThree.addEventListener("mouseout", removeBackThree); 

buttonFour.addEventListener("mouseover", doBackgroundFour); 
buttonFour.addEventListener("mouseout", removeBackFour); 

buttonFive.addEventListener("mouseover", doBackgroundFive); 
buttonFive.addEventListener("mouseout", removeBackFive); 

buttonSix.addEventListener("mouseover", doBackgroundSix); 
buttonSix.addEventListener("mouseout", removeBackSix); 

buttonSeven.addEventListener("mouseover", doBackgroundSeven); 
buttonSeven.addEventListener("mouseout", removeBackSeven); 

buttonEight.addEventListener("mouseover", doBackgroundEight); 
buttonEight.addEventListener("mouseout", removeBackEight); 

buttonNine.addEventListener("mouseover", doBackgroundNine); 
buttonNine.addEventListener("mouseout", removeBackNine); 

buttonTen.addEventListener("mouseover", doBackgroundTen); 
buttonTen.addEventListener("mouseout", removeBackTen); 

function doBackgroundOne() { 
    thumbnail.classList.add('BackOne'); 
    console.log("fatality");  
} 

function removeBackOne() { 
    thumbnail.classList.remove('BackOne'); 
} 


function doBackgroundTwo() { 
    thumbnail.classList.add('BackTwo'); 
    console.log("fatality");  
} 

function removeBackTwo() { 
    thumbnail.classList.remove('BackTwo'); 
} 


function doBackgroundThree() { 
    thumbnail.classList.add('BackThree'); 
    console.log("fatality");  
} 

function removeBackThree() { 
    thumbnail.classList.remove('BackThree'); 
} 


function doBackgroundFour() { 
    thumbnail.classList.add('BackFour'); 
    console.log("fatality");  
} 

function removeBackFour() { 
    thumbnail.classList.remove('BackFour'); 
} 


function doBackgroundFive() { 
    thumbnail.classList.add('BackFive'); 
    console.log("fatality");  
} 

function removeBackFive() { 
    thumbnail.classList.remove('BackFive'); 
} 


function doBackgroundSix() { 
    thumbnail.classList.add('BackSix'); 
    console.log("fatality");  
} 

function removeBackSix() { 
    thumbnail.classList.remove('BackSix'); 
} 


function doBackgroundSeven() { 
    thumbnail.classList.add('BackSeven'); 
    console.log("fatality");  
} 

function removeBackSeven() { 
    thumbnail.classList.remove('BackSeven'); 
} 


function doBackgroundEight() { 
    thumbnail.classList.add('BackEight'); 
    console.log("fatality");  
} 

function removeBackEight() { 
    thumbnail.classList.remove('BackEight'); 
} 


function doBackgroundNine() { 
    thumbnail.classList.add('BackNine'); 
    console.log("fatality");  
} 

function removeBackNine() { 
    thumbnail.classList.remove('BackNine'); 
} 

function doBackgroundTen() { 
    thumbnail.classList.add('BackTen'); 
    console.log("fatality");  
} 

    function removeBackTen() { 
    thumbnail.classList.remove('BackTen'); 
} 

HTML

<div class="thumbnail" id="thumbN"></div> 

    <section class="palete"> 

     <a href="http://www.takodesign.one/mobile/index.html" id="ButtonOne" class="firewatch">First Site</a> 


     <a href="http://takodesign.one/index2.html" id="ButtonTwo" class="mountains">Redesign</a> 


     <a href="https://drive.google.com/open?id=0B1nl9VJkUj7cN01YNmtsdDVVT2c" id="ButtonThree" class="storyboard">Storyboard</a> 


     <a href="http://www.takodesign.one/animation/index.html" id="ButtonFour" class="animation">Animation</a> 


     <a href="http://www.takodesign.one/animation_interactive/animation.html" id="ButtonFive" class="interactive">Interactive</a> 


     <a href="http://www.takodesign.one/project/index.html" id="ButtonSix" class="redesign">Group project</a> 


     <a href="documents/abeona_report.pdf" id="ButtonSeven" class="abeona">Abeona</a> 


     <a href="documents/design_manual.pdf" id="ButtonEight" class="visual">Visual identity</a> 


     <a href="https://www.youtube.com/watch?v=zy-ZeRD4Img" id="ButtonNine" class="reportage">Reportage</a> 


     <a href="https://vimeo.com/219885010" id="ButtonTen" class="filming">Stronger together</a> 

    </section> 

Answer 1

你怎麼樣遍歷網頁上的所有按鈕，並添加事件監聽器：

步驟

• 獲取所有按鈕上您的頁面
• 循環遍歷集合按鈕
• 在設計你的HTML，你可以將特定的css類作爲按鈕的標識 你想添加事件監聽，循環中使用此檢查 。
• 定義只是一個mouseover和mouseout功能來添加和刪除類，將它們作爲 事件偵聽器和通過參數傳遞的類名（用戶還可以定義 這些類在一些圖案即buttonid +類）

樣品代碼如下

var allButtonsOnYourPage = document.getElementsByTagName('button'); 
for (var i = 0; i < allButtonsOnYourPage.length; i++) { 
    var button = allButtonsOnYourPage[i]; 
    //check button's class 
var appliedCssClass = button .className 
    if(appliedCssClass == 'yourCustomClass'){ 
    button.addEventListener("mouseover", applyBackground, false); 
    addEventListener('mouseover', applyBackground.bind(null, event, 'pass class to be applied')); 
    addEventListener('mouseout', applyBackground.bind(null, event, 'pass class to be removed')); 

} 

} 

function applyBackground(applyThisclass) { 
    document.querySelector("#thumbN").classList.add(applyThisclass); 

} 

function removeBackground(removeThisclass) { 
    document.querySelector("#thumbN").classList.remove(removeThisclass); 
}