jQuery

Question

我创建了一个黑白图片库（使用 CSS 的属性 filter: grayscale()）。

如果用户点击其中一张图片，我希望该图片显示其实际颜色。

我已经写了下面的代码，但是，我不知道如何避免硬编码并创建一个干代码（这样如果我添加 50 张图片我就不必添加额外的代码）。

请帮忙。

$('document').ready(() => {
   $('img').click(() => {
     if ($('img').is("#1")) {
      $('#1').css("filter", "none");
     } else if ($('img').is("#2")) {
       $('#2').css("filter", "none");
     }
etc.

Answer 1

听起来您可能只需要使用完整的 function 并改用 this：

$('document').ready(() => {
   $('img').click(function() {
    $(this).css('filter', 'none');
  });
});

如果您有不希望此侦听器激活的图像，请提供您想要希望侦听器在class上激活的所有图像，喜欢galleryImg，然后做

$('.galleryImg')

而不是

$('img')

jQuery - 折射代码（图片库）

jQuery - refractoring code (gallery of images)

dry