如何刷新点击事件上的标签内容。 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'); 
     });

你们能帮助我吗？

来源

2017-10-17 Kevin

你可以重新加载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/

来源

2017-10-17 06:50:14

对不起，我回答晚了，但我想你的代码，并没有工作：/。我忘了提及iframe可以来自不同的网站。 Youtbe，Vimeo等。所以没有一个真正的特定iframe，只是一般的iframe。 – Kevin

@Kevin我在容器选择器（我有'div.myTabContent'而不是'div＃myTabContent'）有一个错误。我已经纠正了答案。我知道你的内联框架有不同的源代码，但没关系，重新分配'src'属性会停止并重新加载内容。余可以检查这个小提琴的例子... https://fiddle.jshell.net/rigobauer/taxqtowz/ –

@Kevin ...在这里你有另一个小提琴更类似于你的特殊情况（https：//fiddle.jshell达网络/ rigobauer/em5vw5e7 /）。你会看到，如果你开始一个视频，当你点击其他标签时，视频停止。 –

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

回答

相关问题