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触发灯箱内容，如果它有相同的类

或者在leat中使用'if trigger-lightbox-具有相同类别的灯箱内容。

这样，代码就会短得多。

如何实现这一目标？

到目前为止，我尝试了以下内容：

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

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

但没有成功。。。

如果有帮助，我有这个codepen吗？

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

非常感谢你的帮助!!

Answer 1

<强> Working Codepen

首先，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必须是唯一的。使用通用类来对元素进行分组。

要解决此问题，并使代码更干，您可以在触发器元素上使用data属性，该属性将其与目标相关联。这样，您可以拥有无限量的HTML内容，而无需修改JS。像这样：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

请注意，我修改了CSS中灯箱的位置，因为它在代码段中效果不佳。

Answer 3

您可以使用数据属性。每个框及其对应的触发器具有相同的标识符。只需在点击它时抓住触发器的id，然后使用它在右侧框中淡入。

＆＃13;

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

＆＃13;

.box {
  display: none;
}

＆＃13;

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

＆＃13;

Jquery如果元素有相同的类？

3 个答案: