我想爲兩個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(); 
    }); 
});

來源

2016-09-26 Ahmet Yılmaz

你在哪裏添加類？另外，你知道你可以鏈接方法嗎？例如'.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這種方式更兼容，所以你不覆蓋任何造型。

來源

2016-09-26 09:15:03

謝謝。所有方式都可以工作，但我喜歡你的方式並使用它。 –

沒問題。如果你想有一個鼠標懸停的光標，它可以使得像'.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 
});

來源

2016-09-26 09:14:23 Satpal

非常感謝... –

您使用groups（通過逗號）;這些CSS選擇，畢竟：

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

來源

2016-09-26 09:14:49

您可以使用

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

來源

2016-09-26 09:15:04 Kallol

謝謝。它也可以... –

我想爲兩個CSS類添加相同的功能。我該怎麼做？

回答

相關問題