如何将jQuery变量用于此图片库覆盖？

Question

因此，我正在制作一个文件夹画廊，作为我正在建立的网站的一部分，以便进行一些练习。在悬停时，我试图获得一个覆盖，因为这在手机上不起作用，我想这将是一个好主意，使一个jquery后备。这是我的代码：

    $(document).ready(function(){ 
  $('.overlay-1').mouseenter(function() {
    $(this).css('opacity', '1')
    $(this).mouseleave(function() {
      $(this).css('opacity', '0')
    });
  });
  $('.overlay-2').mouseenter(function() {
    $(this).css('opacity', '1')
    $(this).mouseleave(function() {
      $(this).css('opacity', '0')
    });
  });
  $('.overlay-3').mouseenter(function() {
    $(this).css('opacity', '1')
    $(this).mouseleave(function() {
      $(this).css('opacity', '0')
    });
  });
  });

它以这种方式进行，使用户能够在单击某个图像时看到覆盖图。当然有更好的方式来写这一切？也许使用变量，我不确定

谢谢你们！

Answer 1

我会给每个overlay提供相同的类，然后切换一个类来降低/提高click上的opacity (而不是mouseenter/mouseleave，因为它用于移动后备)。例如：

JS Fiddle

单击时要添加/删除的新类：

.opacity-lower {
    opacity: 0;
}

JQuery -切换类

 $(document).ready(function () {
       $('.overlays').click(function () {
           $(this).toggleClass('opacity-lower');
       });
   });

Answer 2

function show() {$(this).css('opacity', 1);}
function hide() {$(this).css('opacity', 0);}

[1,2,3].forEach(function(num) {
    $('overlay-'+num).mouseenter(show).mouseleave(hide);
});