随着时间的推移，如何将相同的Jquery应用于通过CMS添加的唯一ID的元素？
随着时间的推移，如何将相同的Jquery应用于通过CMS添加的唯一ID的元素？
提问于 2017-08-21 23:49:12
我正在建立一个页面，目前包含一些视频，随着时间的推移，将通过我们的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();
});
});如何/有办法实现我想要做的事情吗？谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-21 23:52:01
实现这一点的最简单方法是将元素分组在一起。你可以通过给它们添加一个类，或者通过父元素来选择它们，例如。#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时的疏忽。
Stack Overflow用户
发布于 2017-08-21 23:51:34
当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();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45801237
复制相关文章
相似问题
腾讯云开发者
