CODEWITHSUNDEEP
javascriptjqueryhtml
Ahmet Yılmaz
Ahmet Yılmaz

Reputation: 444

How to add same function for two classs?

There is a jQuery code that already works how I want. .foto class do the function. But I should to add .fotoleft class to do the same function. How can I do the same function for two different classes?

$(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();
    });
});

Upvotes: 1

Views: 100

Answers (4)

Chris J
Chris J

Reputation: 1447

If you want .fotoleft to perform the same function as .foto, I find the most efficient way of doing this would be to use .foto in your html twice, rather than in your JS twice.

I prefer this method as it makes it easier to apply a function to multiple or additional elements without needing to add more classes to the JS.

i.e.

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

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

You could choose to amend your css to make .foto more compatible in this way so you don't overwrite any styling.

Upvotes: 1

Kallol
Kallol

Reputation: 59

You may use

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

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074355

You use groups (via a comma); these are CSS selectors, after all:

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

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You just need to use Multiple Selector (“selector1, selector2, selectorN”)

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

Upvotes: 3

Related Questions