Question

有一个jQuery代码已经按我想要的方式运行。 .foto类执行该功能。但我应该添加.fotoleft类来执行相同的功能。如何为两个不同的类做同样的功能？

$(document).ready(function() {
    $(".foto").click(function() {

        $src = $(this).attr("src");
        if (!$("#light-box").length > 0) {
            $("body").append("<div id='light-box'> <span class='close'></span><img src=''></div>");
            $("#light-box").slideDown();
            $("#light-box img").attr("src", $src);
        } else {
            $("#light-box").slideDown();
            $("#light-box img").attr("src", $src);
        }
    });

    $("body").on("click", "#light-box", function() {
        $("#light-box").slideUp();
    });
});

Answer 1

您只需使用Multiple Selector (“selector1, selector2, selectorN”)

即可

$(".foto, .fotoleft ") .click(function(){
    //Your existsing code
});

Answer 2

您使用groups（通过逗号）;毕竟这些是CSS选择器：

$(".foto, .fotoleft")...

Answer 3

如果您希望.fotoleft执行与.foto相同的功能，我发现最有效的方法是在您的HTML中使用.foto两次，而不是在您的JS两次。

我更喜欢这种方法，因为它可以更容易地将函数应用于多个或其他元素，而无需向JS添加更多类。

即

<a class='foto'>Do Something</a>

<a class='foto fotoleft'>Do Something too></a>

您可以选择修改您的CSS以使.foto更加兼容，这样您就不会覆盖任何样式。

Answer 4

您可以使用

$(".foto, .fotoleft") .click(function(){

如何为两个类添加相同的功能？

4 个答案: