Question

我不知道如何搜索我要寻找的东西...但是我会尽力解释它。

我有以下执行以下操作的jQuery：

当您点击 .lightbox-trigger-1 时，它将在灯箱中打开类为 .lightbox-content-1 的元素。当您点击类别为 lightbox-trigger-2 的元素时，它会打开类别为 lighbox-content-2 的元素，与lightbox-trigger-3、4相同的元素5，依此类推。

这是我正在使用的代码，但是我敢肯定，有一种更好的方法可以编写此代码，以便无论“ lightbox-trigger-”之后的数字（甚至是单词）如何，它只会打开元素在“ lightbox-content-”之后具有相同数字（或单词）的数字。我希望这是有道理的...

问题：我该如何写，以便有无限数量的灯箱（不仅仅是10个）？

$('.lightbox-trigger-1').magnificPopup({ items: { src: '.lightbox-content-1', type: 'inline' } });
$('.lightbox-trigger-2').magnificPopup({ items: { src: '.lightbox-content-2', type: 'inline' } });
$('.lightbox-trigger-3').magnificPopup({ items: { src: '.lightbox-content-3', type: 'inline' } });
$('.lightbox-trigger-4').magnificPopup({ items: { src: '.lightbox-content-4', type: 'inline' } });
$('.lightbox-trigger-5').magnificPopup({ items: { src: '.lightbox-content-5', type: 'inline' } });
$('.lightbox-trigger-6').magnificPopup({ items: { src: '.lightbox-content-6', type: 'inline' } });
$('.lightbox-trigger-7').magnificPopup({ items: { src: '.lightbox-content-7', type: 'inline' } });
$('.lightbox-trigger-8').magnificPopup({ items: { src: '.lightbox-content-8', type: 'inline' } });
$('.lightbox-trigger-9').magnificPopup({ items: { src: '.lightbox-content-9', type: 'inline' } });
$('.lightbox-trigger-10').magnificPopup({ items: { src: '.lightbox-content-10', type: 'inline' } });

Answer 1

我建议使用数据元素将两个字段关联在一起。例如类似的东西。

<a href="" class="lightbox-trigger" data-content="lightbox-content-1">Trigger 1</a>

$('.lightbox-trigger').each(function(){
  var $this = $(this);

  $this.magnificPopup({ items: { src: '.'+ $this.data('content'), type: 'inline' } });
});

然后要做的就是确保它们都具有相同的类，并且它们的数据内容都已正确设置。

如果您无法添加自定义数据元素来简化此逻辑，则可以选择执行一个表达式以匹配多个元素。

$('[class^="lightbox-trigger-"]').each(function(){
  var triggerClass = Array.prototype.find.call(this.classList, function(clazz){
    return clazz.indexOf('lightbox-trigger-') > -1;
  });
  
  console.log(triggerClass);
  
  var suffix = triggerClass.split('lightbox-trigger-')[1];
  
  console.log(suffix);
  
  var content = '.lightbox-content-'+ suffix;
  
  console.log(content);
  
  //use the content in your method call
  //$(this).magnificPopup({ items: { src: content, type: 'inline' } });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="lightbox-trigger-1 classa"></a>
<a href="" class="lightbox-trigger-2 classb"></a>
<a href="" class="lightbox-trigger-3 classc"></a>
<a href="" class="lightbox-trigger-4 classd"></a>

jQuery选择器-选择元素以相同数字结尾的元素

1 个答案: