如何在点击事件中刷新标签内容。 WordPress和Javascript

Question

关于我正在研究的Worpress主题，这可能是我的第二个或第三个问题。 这是我需要帮助的网站，其中包含+2个iframe的发布示例

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

这是我的PHP代码：您可以看到我有一个带“ nav-item”类的li元素，要显示的内容（ <?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');
        });

你们能帮我吗？

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/