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

debugcn 发表于 Dev

脏鸟设计

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

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

曲折的

我建议这样的事情：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。