将文字悬停在文字上/不使用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); 
}