我想为两个CSS类添加相同的功能。我该怎么做？

问题描述：

我有这个jQuery代码工作。 .foto css类做这个功能。但我想添加.fotoleft css类来做同样的功能，但我不能这样做plz帮助我！我想为两个CSS类添加相同的功能。我该怎么做？

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

你在哪里添加类？另外，你知道你可以链接方法吗？例如'.addClass（'foto'）。addClass（'fotoleft'）'---您也可以将类放在一个'.addClass（'foto fotoleft'）' – evolutionxbox

'$（“。foto，.fotoleft”）' ？ – Maxx

这是值得你花时间从头到尾阅读[jQuery API]（http://api.jquery.com）的时间。它只需要大约一个小时，两个上衣，并且几乎立即就会给你回报。 –

答

如果你想.fotoleft执行相同的功能.foto，我觉得这样做的最有效的方法是使用在你的HTML .foto两次，而不是你的JS两次。

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

即

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

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

你可以选择要修改你的CSS，使.foto这种方式更兼容，所以你不覆盖任何造型。

谢谢。所有方式都可以工作，但我喜欢你的方式并使用它。 –

没问题。如果你想有一个鼠标悬停的光标，它可以使得像'.btn'这样的独特类更容易。我也有这个作为一个单独的类，与'.btn {cursor：pointer; }'，然后将其添加到我需要的任何元素。在这个例子中，这会给你'Do Something too, with a mouseover cursor'。每个人都会做不同的事情，但这只是我的选择，以这种方式简洁的JS和CSS，因为用一个类更容易修改许多按钮。 –

是的。它非常有用。 –

答

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

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

非常感谢... –

答

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

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

答

您可以使用

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

谢谢。它也可以... –

我想为两个CSS类添加相同的功能。我该怎么做？

相关推荐