如何动态显示 div 而无需先将其加载到页面上？答案

【问题标题】：Way to dynamically display a div without having it load on the page first?如何动态显示 div 而无需先将其加载到页面上？
【发布时间】：2017-08-15 21:13:02
【问题描述】：

我有一个简单的代码，每次都显示一个随机的 div，它运行良好。问题是随机显示的 div 是 HubSpot CTA，因此当页面加载时，它会将所有（我目前有 5 个）CTA 视为正在查看，而实际上查看者只看到一个。所以它与分析报告搞砸了。

有没有办法将 HTML 存储在一个变量中（通常可以正常工作，但我遇到了将 HubSpot 脚本存储在同一个变量中的问题）并随机显示变量，或者存储 HTML（包括 HubSpot 脚本) 其他地方并从那里拉出来并随机显示？我对 JS 的了解非常有限，所以我不知道该怎么做。

HTML 示例

        <div class="random_cta">
        <article>
            <img alt="Image Alt Text" src="image link here">
            <div class="text-container">
                <h3>Header Here</h3>
                <p>Description here</p>
                <p><!--HubSpot Call-to-Action Code -->
<img alt="Image Alt Text" class="hs-cta-img" id="hs-cta-img" src="image source" style="border-width:0px;"></a></span> 
                <script charset="utf-8" src="https://js.hscta.net/cta/current.js">
                </script> 
                <script type="text/javascript">
                hbspt.cta.load(000000, '76b59fa5-f6d9-4818-bdb0-f91849b25499', {}); 
                </script></span><!-- end HubSpot Call-to-Action Code --></p>
            </div>
        </article>
    </div>

这又重复了 4 次。

这是随机显示的JS：

<script>
var random = Math.floor(Math.random() * $('.random_cta').length);
$('.random_cta').hide().eq(random).show();
</script>

【问题讨论】：

标签： javascript jquery html hubspot

【解决方案1】：

我不得不说，我不知道这个 HubSpot，但是看看你提供的 sn-p，你似乎正在加载一个库 5 次，并为你的每个元素调用 hbspt.cta.load(...)。

首先，只加载一次库（在文档的<head> 中）就足够了。然后在元素上调用show() 之后调用库方法。

编辑：由于您需要一个特定的密钥来传递给您的库方法，您可以将其作为数据属性存储在您的每个 div 的 html 中：

<div class="random_cta" data-id="76b59fa5-f6d9-4818-bdb0-c1c1c1c1c1c1">...</div>

然后在你的脚本中得到它：

var random = Math.floor(Math.random() * $('.random_cta').length);
$('.random_cta').hide().eq(random).show();
var id = $('.random_cta').eq(random).data('id');
hbspt.cta.load(000000, id, {});

希望对你有帮助。

【讨论】：

我明白了，我用一种可能的方法更新了我的答案。另一种方法是将这些 id 的列表存储在您的脚本中，而不是作为数据属性。