Javascript 动态显示div而不首先在页面上加载它的方法?
我有一个简单的代码,每次都显示一个随机的div,它工作得很好。问题是随机显示的div是HubSpot cta,因此当页面加载时,它会将所有(我目前有5个)cta计算为正在查看,而实际上,查看者只看到一个。因此,它与分析报告有关 有没有一种方法可以将HTML隐藏在一个变量中(通常工作正常,但我在将HubSpot脚本隐藏在同一个变量中时遇到问题)并随机显示变量,或者将HTML(包括HubSpot脚本)存储在其他地方并从那里提取并随机显示?我对JS的了解非常有限,所以我不知道该怎么做 HTML的示例Javascript 动态显示div而不首先在页面上加载它的方法?,javascript,jquery,html,hubspot,Javascript,Jquery,Html,Hubspot,我有一个简单的代码,每次都显示一个随机的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>
标题在这里
描述在这里
hbspt.cta.load(000000,'76b59fa5-f6d9-4818-bdb0-f91849b25499',{});
这一过程在这条线上又重复了4次
这是随机显示的JS:
<script>
var random = Math.floor(Math.random() * $('.random_cta').length);
$('.random_cta').hide().eq(random).show();
</script>
var random=Math.floor(Math.random()*$('.random_cta').length);
$('.random_cta').hide().eq(random.show();
我不得不说,我不知道这个HubSpot,但是看看您提供的代码片段,似乎您正在加载一个库5次,并为每个元素调用hbspt.cta.load(…)
首先,只加载库一次(在文档的
中)就足够了。
然后在调用元素上的show()
之后调用library方法
编辑:因为您需要一个特定的键来传递给库方法,所以您可以将它作为每个div的数据属性存储在html中:
<div class="random_cta" data-id="76b59fa5-f6d9-4818-bdb0-c1c1c1c1c1c1">...</div>
希望能有所帮助。我不得不说,我不知道这个HubSpot,但看看您提供的代码片段,似乎您正在加载一个库5次,并为每个元素调用
hbspt.cta.load(…)
首先,只加载库一次(在文档的
中)就足够了。
然后在调用元素上的show()
之后调用library方法
编辑:因为您需要一个特定的键来传递给库方法,所以您可以将它作为每个div的数据属性存储在html中:
<div class="random_cta" data-id="76b59fa5-f6d9-4818-bdb0-c1c1c1c1c1c1">...</div>
希望有帮助。我明白了,我用一种可能的方法更新了我的答案。另一种方法是将这些ID的列表存储在脚本中,而不是作为数据属性。另一种方法是将这些ID的列表存储在脚本中,而不是作为数据属性。