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

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

从那里，您可以使用this关键字来引用在处理程序中引发事件的元素。我还强烈建议您使用预定义的CSS类来设置元素的样式，并使用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时的疏忽。

Answer 2

当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();
  });
});

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

2 个答案: