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

我会给每个叠加层设置相同的类，然后切换一个降低/提升opacity上click的类（不是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);
});

如何在此图库集合中使用jQuery变量？

2 个答案: