javascript - 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 触发 lightbox-content

或者至少有类似“如果触发器-灯箱-具有相同类别的灯箱-内容”之类的内容。

这样代码会短很多。

这怎么可能实现？

到目前为止，我尝试了以下方法:

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

Working Codepen .

首先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>