如何在点击事件上刷新选项卡内容.WordPress和Javascript

Question

这可能是我关于我正在研究的Worpress主题的第二个或第三个问题。这是我需要帮助的+2 iframe帖子示例的网站

我想要的是当单击其他选项（li 元素）时停止当前视频 iframe 缓冲。它的当前状态，与我想要的相反。我的意思是所有 iframe 可以同时复制，我想避免这种情况。

这是我的 php 代码：你可以看到我有一个带有"导航项"类的 li 元素，要显示的内容（<?php echo $iframe; ?>）在div 内，类为"视频网格"

<!-- 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');
        });

你们能帮我吗？

Answer 1

您可以重新加载iframe元素的src来阻止它们...

$(document).ready(function() {
    $('a.nav-link').click(function() {
        $('div#myTabContent iframe').each(function() { 
            $(this).attr('src',$(this).attr('src'));  
        });
    });
});

已编辑：

使用检查器更深入地检查您的代码，另一种解决方案（更快、更干净、可能更好）是搜索以前的活动面板并停止该面板的 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/