HTML与JavaScript-将灰度应用于表格中的图像，然后将鼠标图像返回到彩色版本

Question

我有一个问题，即在JavaScript中使用MouseOver / MouseOut事件以及将灰度应用于表格。问题说我必须首先制作html中的图像网格（表）。然后，我需要将JavaScript添加到HTML中，以便当我通过图像鼠标鼠标时，图像会变成彩色图像，并且当我从图像中鼠标鼠标鼠标时，图像会重新回到灰色图像中。 问题说不允许使用CSS，因此只有使用JavaScript和HTML（如果可能）。。 非常感谢您的帮助，我真的很感激！

这是我下面的一些代码（表图像需要从灰度开始，然后在使用MouseOver事件时应用/删除灰度到目前为止，鼠标效果仅在第一个图像上起作用。

function image_grayscale() {
  document.getElementById("image").style.filter = "grayscale(100%)";
}

function remove_grayscale() {
  document.getElementById("image").style.filter = "grayscale(0%)";
}

<div class="table">
  <table border="3" align=center width="600" height="200">
    <tr style="width:1" ;style="height:10%" ; bgcolor="white">
      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" style="grayscale" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>

      <td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
        <img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
      </td>
    </tr>
  </table>

Answer 1

1. ID属性必须是唯一的。
2. 不要将HTML杂乱无章。它应该很容易阅读。
3. 使用addeventListener而不是onMouseover。
4. 方法名称通常用kebabcase编写（请参阅我添加的新方法）。
5. 不要重复代码。相反，重构代码类似于新方法。

let table = document.getElementById('greyscaleTable')

table.addEventListener('mouseover', remove_grayscale);
table.addEventListener('mouseout', image_grayscale);

function image_grayscale(event) {
  let element = event.target;
  changeGrayscale('100%', element);
}

function remove_grayscale(event) {
  let element = event.target;
  changeGrayscale('0%', element);
}

function changeGrayscale(amount, element) {
  let isGrayscaleImage = element.classList.contains('grayscale');
  
  if (isGrayscaleImage) {
    element.style.filter = `grayscale(${amount})`;  
  }
}

#greyscaleTable img {
  width: 100px;
  height: 100px;
}

<div id="greyscaleTable" class="table">
  <table border="3" align=center width="600" height="200">
    <tr>
      <td>
        <img class="grayscale" style="filter: grayscale(100%)"  src="https://picsum.photos/id/1067/100/100" />
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
      </td>

      <td>
        <img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
      </td>
    </tr>
  </table>

Answer 2

我个人建议以下内容：

// define the function as a constant, using Arrow syntax;
// here we take the Event Object ('evt', passed from the (later)
// use of EventTarget.addEventListener(). From the Event-Object
// we retrieve the element to which the function was bound
// (evt.currentTarget), and update its CSSStyleDeclaration
// for the filter() function.
// We use a template-literal string (delimited with back-ticks
// to interpolate the JavaScript into the string, using the
// ${JavaScript here} notation.
// Based on the event-type we return the arguments of either
// 0 or 1; if the evt.type is exactly 'mouseenter' 0 is
// returned from the conditional operator, otherwise 1 is
// returned:
const toggleGrayscale = (evt) => evt.currentTarget.style.filter = `grayscale( ${evt.type === 'mouseenter' ? 0 : 1} )`,
  // here we retrieve a NodeList of all <img> elements within the document:
  images = document.querySelectorAll('img');

// we iterate over the NodeList of images to set them to
// grayscale(), initially:
images.forEach(
  (img) => img.style.filter = "grayscale(1)"
);

// we iterate again (as Array.prototype.forEach() has no
// return value; here we use EventTarget.addEventListener()
// to bind the toggleGrayscale function for both the 
// 'mouseenter' and 'mouseleave' events:
images.forEach(
  (img) => {
    img.addEventListener('mouseenter', toggleGrayscale)
    img.addEventListener('mouseleave', toggleGrayscale)
  });

*,
 ::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

<div class="table">
  <table>
    <tr>
      <td>
        <!-- I removed the size/width attributes since they don't seem to be useful, use CSS;
             also duplicate ids are invalid, an id must be unique within the document:-->
        <img src="https://placeimg.com/200/200/animals">
      </td>
      <td>
        <img src="https://placeimg.com/200/200/architecture">
      </td>
      <td>
        <img src="https://placeimg.com/200/200/nature">
      </td>
      <td>
        <img src="https://placeimg.com/200/200/people">
      </td>
      <td>
        <img src="https://placeimg.com/200/200/tech">
      </td>
  </table>

参考：

• “ nofollow noreferrer”>箭头函数。
• cssStyledEclaration 。
• eventtarget.addevent.addeventlistlistlistlistener（） a>。
• nodelist.prototote.prototype.foreach（foreach（）。