javascript - 悬停在文本上切换图像/不使用 jQuery

Question

我正在制作一个作品集页面作为学校项目。我的想法是在下面有一个带有标题的图像，每当我将鼠标悬停在标题上时(假设会有设计手册、动画、 Storyboard 等的标题)图像将更改为与可以单击的标题相对应的图像并将导向一个子页面，其中包含有关所选主题的更多信息。我不能使用任何 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 + class )

示例代码如下

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);
}