时间戳

首页 > 解决方案 > 更智能的 JQuery 选择器？

javascript - 更智能的 JQuery 选择器？

问题描述

目前在我的投资组合中，我有单独的功能来打开单独的灯箱。

$(".project.clientA").click(function(){     
    $(".lightbox.clientA").addClass("open", 500);
});

$(".project.clientB").click(function(){     
    $(".lightbox.clientB").addClass("open", 500);
});

$(".project.clientC").click(function(){     
    $(".lightbox.clientC").addClass("open", 500);
});

因为我对每个项目都有这样的功能，当你有很多项目时，这会使代码变得很长。我想知道是否有一种方法可以通过这样的方式将其模板化为一个适用于所有客户端（clientA、clientB、clientC 等）的函数。

$(".project.whateverclient").click(function(){      
    $(".lightbox.sameclient").addClass("open", 500);
});

希望这是有道理的。

标签： javascriptjqueryfunctionselector

解决方案

分班可能会有所帮助。
为"project clientA"，做出来"project client nameOfA"。
然后你可以使用选择器$(".project.client")

但是如果你不能这样做，一个性能更差的 jQuery 通配符方式将是：

$('.project[class*=client]')

对于第二个任务，您必须从函数体内知道实际的客户端名称，这应该会有所帮助：

Array.from(this.classList).filter(x => x.startsWith('client'))

推荐阅读