我的页面中有一个小部件来获取一些我这样调用的数据:
<div id="widgetContain">
<script type="text/javascript" src="https://widget.com/widgetscript.js" async>
{
"a": "1m",
"b": 425,
"c": "light",
"d": false,
"e": 450,
"f": "blue",
"g": true,
"g": "en"
}
</script>
</div>
除此之外，我还有一些链接，单击这些链接时我需要更改“f”值。
<p><a href="" data-href="red" class="ttlink active">Red</a></p>
我不知道如何进行这项工作。我尝试将“f”的值设置为 var:
{
....
"f":newVal;
}
$('.ttlink').on('click', function(e){
var newVal = $(this).attr('data-href');
});
这显然行不通。如何加载脚本，然后将键/值对作为参数，并在单击链接时修改它们，同时仅加载库一次？
根据 api 作者的预期用途工作的 Fiddle - https://jsfiddle.net/35u247xc/
fiddle 已设置我需要 -> https://jsfiddle.net/5gar867m/1/
最佳答案
我会建议这样的事情:
<body>
<div id="widgetContain">
<script type="text/javascript" src="https://widget.com/widgetscript.js" async></script>
</div>
<!-- end of page -->
<script>
var params = {
a: "1m",
b: 425,
c: "light",
d: false,
e: 450,
f: "blue",
g: true,
h: "en"
};
$('.ttlink').on('click', function(e) {
params.f = $(this).data("href");
});
</script>
</body>
将加载外部库，加载所有内容后，将运行第二个脚本 block 。
更新
可以尝试不同的顺序。
<body>
<div id="widgetContain">
<script>
var params = {
a: "1m",
b: 425,
c: "light",
d: false,
e: 450,
f: "blue",
g: true,
h: "en"
};
$('.ttlink').on('click', function(e) {
params.f = $(this).data("href");
});
</script>
<script type="text/javascript" src="https://widget.com/widgetscript.js" async>
params
</script>
</div>
<!-- end of page -->
</body>
这首先定义了名为params的对象，然后将回调绑定(bind)到click，然后当小部件加载时，可以使用它来加载该对象。请注意，这只会在页面加载时加载一次，并且所做的更改不会在页面加载后影响小部件。
关于javascript - 如何在点击时更改小部件参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59461775/