Jquery是否元素具有相同的類？

Question

我有一個帶有很多燈箱的頁面（超過一百個）

每次我必須在 lightbox-content 和 trigger-lightbox 中添加一個類

喜歡 1 2 3 4

在 jquery 中，我需要復制它以觸發好的燈箱。 喜歡

$('a#trigger-lightbox.1').click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content.1').fadeIn('slow'); 
});

$('a#trigger-lightbox.2').click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content.2').fadeIn('slow'); 
});

$('a#trigger-lightbox.3').click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content.3').fadeIn('slow'); 
});

$('a#trigger-lightbox.4').click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content.4').fadeIn('slow'); 
});

我想要一個javascript來添加類1 2 3等，如果它具有相同的類，則自動+ jquery觸發燈箱內容

或者至少有類似“如果觸發器燈箱-具有相同類別的燈箱內容”之類的東西。

這樣代碼會更短。

這怎么可能實現？

到目前為止，我嘗試了以下方法：

var same = $(this).attr("class");

$('a#trigger-lightbox'+'.'+same).click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content'+'.'+same).fadeIn('slow'); 
});

但沒有成功。 . .

如果有幫助，我有這個代碼筆嗎？

https://codepen.io/anon/pen/VQQzdJ

真的很感謝你的幫助！！

Answer 1

工作代碼筆。

首先id在同一個文檔中應該是唯一的，所以請用公共類替換重復的id，然后你可以使用data-*屬性，如下例所示：

$('a.trigger-lightbox').click(function() {
  var index = $(this).data('index');

  $('.lightbox-background').fadeIn('slow'); 
  $('.lightbox-content.'+index).fadeIn('slow'); 
});

$('.lightbox-background').click(function() {
  $(this).fadeOut('slow'); 
  $('.lightbox-content').fadeOut('slow'); 
});

 $('a.trigger-lightbox').click(function() { var index = $(this).data('index'); $('.lightbox-background').fadeIn('slow'); $('.lightbox-content.' + index).fadeIn('slow'); }); $('.lightbox-background').click(function() { $(this).fadeOut('slow'); $('.lightbox-content').fadeOut('slow'); });

 .lightbox-content { background: white; padding: 50px; margin: 0 auto; z-index: 999999; display: none; position: fixed; left: 50%; margin-left: -50px; } ul li { list-style: none } .lightbox-background { display: none; background: rgba(0, 0, 0, 0.8); width: 100%; position: fixed; height: 100%; z-index: 1; top: 0px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="lightbox-content 1">TEST 1</div> <div class="lightbox-content 2">TEST 2</div> <div class="lightbox-content 3">TEST 3</div> <div class="lightbox-content 4">TEST 4</div> <ul class="accordion-content"> <li> <a class="trigger-lightbox" href="#" data-index='1'><p>TRIGGER 1</p></a> </li> <li> <a class="trigger-lightbox" href="#" data-index='2'><p>TRIGGER 2</p></a> </li> <li> <a class="trigger-lightbox" href="#" data-index='3'><p>TRIGGER 3</p></a> </li> <li> <a class="trigger-lightbox" href="#" data-index='4'><p>TRIGGER 4</p></a> </li> </ul> <div class="lightbox-background"></div>

Answer 2

首先，您在多個無效 HTML 元素中重復相同的id屬性。 id必須是唯一的。 使用通用類來對元素進行分組。

為了解決這個問題，並使您的代碼更加 DRY，您可以在觸發器元素上使用data屬性，將其與目標相關聯。 通過這種方式，您可以擁有無​​限量的 HTML 內容，而無需修改 JS。 像這樣的東西：

 $('.trigger').click(function() { $('.lightbox-background').add($(this).data('target')).fadeIn('slow'); }); $('.lightbox-background').click(function() { $(this).fadeOut('slow'); $('.lightbox').fadeOut('slow'); });

 .lightbox { background: white; padding: 50px; margin: 0 auto; z-index: 999999; display: none; position: fixed; } ul li { list-style: none } .lightbox-background { display: none; background: rgba(0, 0, 0, 0.8); width: 100%; position: fixed; height: 100%; z-index: 1; top: 0px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="lightbox" id="lightbox1">TEST 1</div> <div class="lightbox" id="lightbox2">TEST 2</div> <div class="lightbox" id="lightbox3">TEST 3</div> <div class="lightbox" id="lightbox4">TEST 4</div> <ul class="accordion-content"> <li> <a href="#" class="trigger" data-target="#lightbox1"> <p>TRIGGER 1</p> </a> </li> <li> <a href="#" class="trigger" data-target="#lightbox2"> <p>TRIGGER 2</p> </a> </li> <li> <a href="#" class="trigger" data-target="#lightbox3"> <p>TRIGGER 3</p> </a> </li> <li> <a href="#" class="trigger" data-target="#lightbox4"> <p>TRIGGER 4</p> </a> </li> </ul> <div class="lightbox-background"></div>

請注意，我修改了燈箱在您的 CSS 中的位置，因為它在代碼片段中效果不佳。

Answer 3

您可以使用數據屬性。 每個框及其對應的觸發器具有相同的標識符。 單擊觸發器時，只需獲取觸發器的 id，然后使用它在右側框中淡入淡出。

 $('.trigger-lightbox').on('click', function() { const id = $(this).data('id'); $(`.box[data-id="${id}"]`).fadeIn('slow'); });

 .box { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="trigger-lightbox" data-id="1">Trigger one</a> <a class="trigger-lightbox" data-id="2">Trigger one</a> <div class="box" data-id="1">Box one</div> <div class="box" data-id="2">Box two</div>