Javascript 在不使用jQuery的情况下，将图像悬停在text/上切换

我正在做一个学校项目的档案页。我的想法是在标题下方有一个图像，每当我将鼠标悬停在标题上方时（比如说，设计手册、动画、故事板等将有一个标题），该图像将更改为与标题对应的图像，可以单击该图像，并将导致一个子页面，其中包含有关所选主题的更多信息。我还不能使用任何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

如何循环浏览页面上的所有按钮并添加事件侦听器：

步骤

• 获取页面上的所有按钮
• 循环按钮集合
• 在设计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);
}

var allbuttonyourpage=document.getElementsByTagName（'button'）；
对于（var i=0；i

你能给我们看看你的html吗？那么，如果你有50个按钮，你会复制/粘贴并重复相同的代码50次吗？@JeremyThille

但是它太长了，我想知道是否有更短的可能性

我想这是他的问题，如何在没有jQuery的情况下编写更短、更清晰的代码。您可以为buttons指定一个类，而不是id。因此，您可以添加一个事件列表器并获取单击的按钮索引。对于函数，创建类似于

doBackground（）{index}

的内容，然后可以将索引传递给函数

doBackground（1）

。在函数内部，您可以使用开关。对于类名，您可以使用

Back7

而不是

BackSeven

，这样您可以动态添加它们，或者您可以使用内联css，这样您就不必有太多的类。此外，您还可以像

images/img1.jpg那样以友好的方式排列图像url，images/img2.jpg…

为什么需要另一个类？你不能切换类并在css中设置样式吗？你想设定什么样的风格？也许添加css也会更好。对不起，我对JS非常陌生（+-2周的编码），我必须指定“yourCustomClass”吗？我真的不确定代码中“要应用的pass类”的目的是什么，你能解释一下吗？如果我得到的正确，那么函数将根据它在前面的语句中选中的按钮删除并应用类？还有（applyThisClass和remove）的部分对我来说有点不清楚。我知道有很多问题要问，但是你能不能用jfiddle写一个工作示例，这样我就可以在工作中看到它？我真的迷路了，必须在明天之前交作业：/Vitek-这是一个工作示例，如果您有问题/错误，请尝试整合并返回！祝你好运：）

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