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

Posted 2023-05-09

【中文标题】如何在点击事件上刷新标签内容。 WordPress 和 Javascript

【英文标题】：How to refresh tab content on click event. Wordpress and Javascript

【发布时间】：2018-03-28 18:15:36

【问题描述】：

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

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

这是我的 php 代码： 你可以看到我有一个类为“nav-item”的 li 元素，要显示的内容（<?php echo $iframe; ?>）在类“video-grid”的 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');
        );

你们能帮我解决这个问题吗？

【参考方案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/

【讨论】：

对不起，回答迟了，但我试过你的代码，但它不起作用：/。我忘了提到 iframe 可以来自不同的站点。 Youtbe、Vimeo 等所以没有真正特定的 iframe，只是一般的 iframe。

@Kevin 我在容器选择器中有一个错误（我有div.myTabContent 而不是div#myTabContent）。我已经更正了答案。我知道您的 iframe 具有不同的来源提示，但没关系，重新签名 src 属性会停止并重新加载内容。 Yu 可以查看这个小提琴示例...fiddle.jshell.net/rigobauer/taxqtowz

@Kevin ...在这里您还有另一个与您的特定情况更相似的小提琴（fiddle.jshell.net/rigobauer/em5vw5e7）。您会看到，如果您开始播放一个视频，当您点击其他选项卡时，视频会停止。

谢谢，hermano（我知道你来自西班牙）。我尝试了编辑代码，它工作得很好；这正是我想要的:)。

我的荣幸！！祝你有美好的一天，愉快的编码！