如何刷新点击事件上的标签内容。 WordPress的和Javascript
问题描述:
这可能是我的第二个或第三个关于我正在工作的Worpress主题的问题。这是我需要帮助的网站post sample with +2 iframes如何刷新点击事件上的标签内容。 WordPress的和Javascript
我想要的是当点击不同的选项(li元素)时停止当前视频iframe缓冲。 它的当前状态,与我想要的相反。我的意思是所有iframe可以在同一时间再现,我想避免这种情况。
这是我的php代码: 你可以看到我有一个li类型的“nav-item”类,并且要显示的内容(<?php echo $iframe; ?>
)与div类中的“video-grid”
<!-- Menu-tabs) -->
<?php $iframe_name = get_post_meta($post->ID, 'Vimeo URL', true); ?>
<?php if (!empty($iframe)) : ?>
<?php else : ?>
<ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
<?php $links = get_post_custom_values('Iframe'); ?>
<?php if (is_array($links)) : ?>
<?php foreach ($links as $key=>$li) : ?>
<li class="nav-item <?php echo $key == 0 ? 'active ' : ''; ?>">
<a class="nav-link " data-toggle="tab" href="#tab<?php echo $key; ?>" role="tab" aria-controls="tab" aria-expanded="true">Option</a>
</li>
<?php endforeach ; ?>
<?php endif; ?>
</ul>
<div class="tab-content" id="myTabContent">
<!--------------------------------------------------------- Content-tabs/Iframes players --------------------------------------------------------------------------------->
<?php $player = get_post_custom_values('Iframe'); ?>
<?php if (is_array($player)) : ?>
<?php foreach ($player as $key=>$iframe) : ?>
<div class="tab-pane <?php echo $key == 0 ? 'active ' : ''; ?>" id="tab<?php echo $key; ?>" role="tabpanel" aria-labelledby="tab">
<br>
<div class="song">
<div class="video-grid">
<?php echo $iframe; ?>
</div>
</div>
</div>
<?php endforeach ?>
我试图通过使用一些Javascript代码,但它不工作呢。这是我到目前为止:
$(document).ready(
function() {
$('.video-grid').click('.nav-item');
reload('.video-grid');
});
你们能帮助我吗?
答
你可以重新加载iframe
元素,以阻止他们的src
...
$(document).ready(function() {
$('a.nav-link').click(function() {
$('div#myTabContent iframe').each(function() {
$(this).attr('src',$(this).attr('src'));
});
});
});
EDITED:
检查你的代码检查,另一种解决方案(更快,更清洁,可能会更好更深)将搜索以前的活动面板,并停止该面板的iframe(真的没有意义重新加载其余的,因为他们没有运行)...
$(document).ready(function() {
$('a.nav-link').click(function() {
$('div#myTabContent div.tab-pane.active iframe').attr('src',function() { return $(this).attr('src'); });
});
});
这里,你有你的情况的小提琴例子... https://fiddle.jshell.net/rigobauer/em5vw5e7/
对不起,我回答晚了,但我想你的代码,并没有工作:/。我忘了提及iframe可以来自不同的网站。 Youtbe,Vimeo等。所以没有一个真正的特定iframe,只是一般的iframe。 – Kevin
@Kevin我在容器选择器(我有'div.myTabContent'而不是'div#myTabContent')有一个错误。我已经纠正了答案。我知道你的内联框架有不同的源代码,但没关系,重新分配'src'属性会停止并重新加载内容。余可以检查这个小提琴的例子... https://fiddle.jshell.net/rigobauer/taxqtowz/ –
@Kevin ...在这里你有另一个小提琴更类似于你的特殊情况(https://fiddle.jshell达网络/ rigobauer/em5vw5e7 /)。你会看到,如果你开始一个视频,当你点击其他标签时,视频停止。 –