Question

我有一个简单的代码，每次都显示一个随机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>

Answer 1

我必须说，我不知道这个HubSpot，但是看看你提供的代码片段，你似乎要加载一个库5次并为你的每个元素调用hbspt.cta.load(...)。

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

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

<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, {});

希望它有所帮助。

如何在不首先加载div的情况下动态显示div？

1 个答案: