Question

这可能是关于我正在研究的Worpress主题的第二个或第三个问题。这是我需要post sample with +2 iframes

帮助的网站

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

这是我的PHP代码：你可以看到我有一个带有＆＃34; nav-item＆＃34;类的li元素。并且要显示的内容（<?php echo $iframe; ?>）位于div内，其中包含＆＃34;视频网格＆＃34;

<!-- 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

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

$(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/

如何刷新点击事件的标签内容。 Wordpress和Javascript

1 个答案: