Question

我的页面上有一个小部件，可以获取一些我这样调用的数据：

<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作者的预期用途工作的小提琴-https://jsfiddle.net/35u247xc/

我需要设置的小提琴-> https://jsfiddle.net/5gar867m/1/

Answer 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>

将加载外部库，并且在加载所有内容之后，将运行第二个脚本块。

更新

可以尝试其他顺序。

<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的对象，然后绑定了一个回调以单击，然后在加载小部件时可以随其一起加载该对象。请注意，这只会在页面加载后加载一次，所做的更改将不会在页面加载后影响小部件。

如果您需要进一步的帮助，则需要更具体地告诉我们您正在使用什么小部件。提供一个分钟。示例：https://stackoverflow.com/help/minimal-reproducible-example

Answer 2

将它们设置为变量

let params = { "a": "1m", "b": 425,
"c": "light", "d": false,
"e": 450, "f": "blue",
"g": true, "g": "en" };

并更改值

$('.ttlink').on('click', function(e){
     params.b = $(this).attr('data-href');
});

脚本元素不可修改

如何在点击时更改小部件参数

2 个答案: