如何将 Same Jquery 应用于随时间推移通过 CMS 添加的具有唯一 ID 的元素？

Question

我正在构建一个当前包含一些视频的页面，并且随着时间的推移将通过我们的 CMS (Craft) 添加更多视频。每个视频的容器 div 将有一个唯一的 ID，如下所示：

<div id="video-1"></div>
<div id="video-2"></div>
<div id="video-3"></div>

每次点击 div 之一，我都想运行一些 Jquery。它是相同的基础 Jquery，但我希望它仅运行用于点击的唯一视频，因此它应该与 ID 相关联。

挑战在于 - 我不想每次添加视频时都必须转到我们的 javascript 文件并手动将新选择器添加到运行函数。我希望 Jquery 适用于通过 CMS 添加的每个新视频，而无需任何额外步骤。假设每个视频的 ID 都会随着新视频的添加而增加。

这是我正在使用的 Jquery 的示例：

$('#video-1').on('click', function() {
  $('#video-1').css('background', 'none');
  $('#video-1').css('display', 'block');
  $('#video-1').css('position', 'static');
  $('iframe').css('display', 'block').attr('src', function() {
    return edTalksAutoPlay();
  });
});

如何/有没有办法实现我想要做的事情？谢谢！

Answer 1

当jQuery 调用事件处理程序时，它安排this 绑定到涉及的DOM 元素。因此，事件处理程序中的 $(this) 将始终为您提供与事件相关的元素的 jQuery 对象。

$('[id^=video]').on('click', function() {
  $(this).css('background', 'none');
  $(this).css('display', 'block');
  $(this).css('position', 'static');
  $(this).css('display', 'block').prop('src', function() {
    return edTalksAutoPlay();
  });
});

Answer 2

实现此目的的最简单方法是将元素组合在一起。您可以通过向它们添加 class 或通过父元素选择它们来做到这一点，例如。 #parent > div.

从那里您可以使用 this 关键字来引用在处理程序中引发事件的元素。我还强烈建议您使用预定义的 CSS classes 来设置元素的样式并使用 addClass()/toggleClass() 来修改它们。像这样：

$('.video').on('click', function() {
  $(this).toggleClass('active').prop('src', function() {
    return edTalksAutoPlay();
  });
});

.active {
  background: none;
  display: block;
  position: static;
}

<div id="video-1" class="video"></div>
<div id="video-2" class="video"></div>
<div id="video-3" class="video"></div>

最后，请注意 div 元素没有 src 属性 - 尽管我认为这只是在简化问题中的 HTML 时的疏忽。

如何将 Same Jquery 应用于随时间推移通过 CMS 添加的具有唯一 ID 的元素？

How to Apply Same Jquery to Elements with Unique IDs Added Through CMS Over Time?

html

javascript

css

jquery

content-management-system