英文:
JQuery - Get all child video poster value and update value with respective parent video html tag
问题
尝试更新每个视频的HTML标记（类名=".video_block video"）的属性值，使用它们各自的子div标记（类名=".posterURL"）。
JQuery -
$(document).ready(function() {
$('.video_block .posterURL').each(function() {
var poster = $(this).data("poster");
$(this).closest('.video_block').find('video').attr('poster', poster);
});
});
HTML -
<div class="container">
<div class="media_block">
<div class="video_block">
<video
controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
width="620">
</video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>
<div class="video_block">
<video
controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
width="620">
</video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>
<div class="video_block">
<video
controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
width="620">
</video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>
</div>
</div>
请分享您的想法！
提前感谢！
英文:
Trying to update the attribute value for each video html tag (classname=".video_block video") by using their respective child div tag (classname="posterURL").
JQuery -
$(document(){
$('.video_block .posterURL').each(function() {
var poster = $(this).data("poster")
$(.video_block video).attr('poster', poster);
})
})
HTML -
<div class="container">
<div class="media_block">
<div class="video_block">
<video
controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
width="620">
</video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div></div>
</div>
<div class="video_block">
<video
controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
width="620">
</video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div></div>
</div>
<div class="video_block">
<video
controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
width="620">
</video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div></div>
</div>
</div>
</div>
Please share your thoughts!
Thanks in advance!
答案1
得分: 1
你有一些语法错误，需要遍历从.posterURL元素到其兄弟元素以定位适当的video元素。
整个过程可以简化如下：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(".video_block video").attr("poster", function() {
return $(this).next(".posterURL").data("poster");
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="video_block">
<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="620"></video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>
<div class="video_block">
<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="620"></video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>
<div class="video_block">
<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="620"></video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>
<!-- end snippet -->
即，对于每个<video>元素，将其poster属性值设置为下一个.posterURL兄弟元素的data-poster值。
英文:
You have a couple of syntax errors and will need to traverse from the .posterURL element to its sibling to target the appropriate video element.
The whole thing can be simplified like this
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(".video_block video").attr("poster", function() {
return $(this).next(".posterURL").data("poster");
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="video_block">
<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="620"></video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>
<div class="video_block">
<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="620"></video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>
<div class="video_block">
<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="620"></video>
<div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>
<!-- end snippet -->
That is, for each <video> element, set its poster attribute value to the data-poster value of the next .posterURL sibling element.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论