如何刷新點擊事件上的標籤內容。 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

回答

相關問題