Ahmet Yılmaz Ahmet Yılmaz - 2 months ago 8
CSS Question

I want to add same function for two css class. How can I do it?

I have this jquery codes that work. .foto css class do this function. But I want add .fotoleft css class to do same function but I can't do it plz help me!

$(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

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.