Javascript 动态显示div而不首先在页面上加载它的方法?

Javascript 动态显示div而不首先在页面上加载它的方法?,javascript,jquery,html,hubspot,Javascript,Jquery,Html,Hubspot,我有一个简单的代码,每次都显示一个随机的div,它工作得很好。问题是随机显示的div是HubSpot cta,因此当页面加载时,它会将所有(我目前有5个)cta计算为正在查看,而实际上,查看者只看到一个。因此,它与分析报告有关 有没有一种方法可以将HTML隐藏在一个变量中(通常工作正常,但我在将HubSpot脚本隐藏在同一个变量中时遇到问题)并随机显示变量,或者将HTML(包括HubSpot脚本)存储在其他地方并从那里提取并随机显示?我对JS的了解非常有限,所以我不知道该怎么做 HTML的示例

我有一个简单的代码,每次都显示一个随机的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的列表存储在脚本中,而不是作为数据属性。