Javascript 如何在单击时更改小部件参数_Javascript_Jquery

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

javascript jquery

Javascript 如何在单击时更改小部件参数,javascript,jquery,Javascript,Jquery,我在我的页面中有一个小部件来获取一些数据，我这样调用这些数据： <div id="widgetContain"> <script type="text/javascript" src="https://widget.com/widgetscript.js" async> { "a": "1m", "b": 425, "c": "light",

我在我的页面中有一个小部件来获取一些数据，我这样调用这些数据：

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

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

这显然是行不通的。如何加载脚本，然后将键/值对作为参数加载，并在单击链接时修改它们，而只加载库一次

根据api作者的预期用途工作的小提琴-

具有我需要的设置的小提琴->

将它们设置为变量

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');
});

脚本元素不可修改

我建议如下：

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

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

如果您需要进一步的帮助，您需要更具体地告诉我们您正在使用什么小部件。提供一个最小值。示例：

因此在初始加载中，我应该：{let params={a:1m，b:425，c:light，d:false，e:450，f:blue，g:true，g:en}；}加载时，我收到此错误嵌入小部件技术分析。js:1小部件设置解析错误：语法错误：JSON中位置0处的意外标记l，然后单击链接，我收到此错误main.js？ver=20151215:105未捕获引用错误：参数不正确defined@DirtyBirdDesign它不会在{和}中。它将是var params={}或让params={}在section.robinseering&@Twisty-question中使用一些fiddle链接进行更新，以显示它是如何工作的，以及我希望如何修改它。我使用了console.logparams，它按预期显示了键/值。但是，我需要它在标记内部运行，如我的示例所示。我在加载时收到这个错误，并且它没有在单击时使用参数重新提交-Widget settings解析错误：SyntaxError:JSON的意外结束input@DirtyBirdDesign您的示例不完整，不清楚您需要运行什么。您的示例只是在脚本块中定义了一个未命名的对象。问题将使用两个FIDLE链接进行更新。AFAIK标记可以是external:或inline var example=value；函数getValueexample{….我不记得显示这两种特性的标记。[强调我的]我不反对-但是这是根据API作者设置小部件的方式->