Javascript Ghost特色图像和iframe问题
HTML 我使用了下面的jsJavascript Ghost特色图像和iframe问题,javascript,jquery,html,ghost,Javascript,Jquery,Html,Ghost,HTML 我使用了下面的js <div class="blog-post"> <div class="blog-image"> <a href="#"><img src="img/featured-img.jpg"/></a> </div> <div class="blog-details"> <h3>Post Title Here</h3> <u
<div class="blog-post">
<div class="blog-image">
<a href="#"><img src="img/featured-img.jpg"/></a>
</div>
<div class="blog-details">
<h3>Post Title Here</h3>
<ul class="blog-meta">
<li>Date</li>
<li>Author</li>
</ul>
<div class="blog-excerpt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yH4zLmi_6n0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
通过将此代码图像替换为iframe,但在每个博客文章中显示相同的iframe。我只想为每个博客文章显示家长视频。假设我有两篇带有两个不同iframe的博客文章。现在我想在中显示iframe
是
任何人都可以帮我 试试这段代码
function iframe_posts() {
var video_url = $(".blog-details").find("iframe").attr("src");
$(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
}
}
iframe_posts();
您必须通过在重复元素上循环来处理单个实例 可以用很多方法来实现这一点,但我会从顶级重复容器开始。。。class=博客文章 })
这段代码解决了我的问题 还是一样的。$。blog-details.findiframe.attrsrc只能返回一个值…将来自第一个选择器匹配,但将应用于每个$.blog图像,并使用相同的urlvar包装器=$this;var embed_url=wrapper.findiframe.attrsrc;通过使用该代码,我确实选择了iframe。但我如何从那个博客摘录区域中选择第一个框架呢?如果用户添加了多个iframe,那么我希望首先在博客图像区域中显示。。所以我需要通过jquery找到第一个iframe
function iframe_posts() {
var video_url = $(".blog-details").find("iframe").attr("src");
$(".blog-excerpt").hide();
$(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
}
$('.blog-post').each(function(){
// `this` is current instance of `blog-post`
var $post = $(this);
// use `find()` to look inside this `$post` instance
var video_url = $post.find('iframe').attr('src');
$post.find('.blog-image').html('....');
});
$(".blog-post").each(function(){
var wrapper = $(this);
var video_url = wrapper.find("iframe").attr("src");
var iframe_content = ('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
var video_div = wrapper.find(".blog-image")
video_div.each(function(){
video_div.html(iframe_content);
});