Question

我有一个javascript小部件，它将显示一个数据图表..我有一个下拉框，让用户能够更改主题。因此，当用户选择主题时，它应该更改并向用户显示新主题。

小工具代码：

<script type="text/javascript">
new TradingView.widget({
  "width": 500,
  "height": 400,
  "interval": "1",
  "timezone": "Etc/UTC",
  "theme": "White",
  "style": "2",

}); 
</script>

HTML / JS代码

<select>
    <option value="moonlight">Moon</option>
    <option value="darkness">Dark</option>
</select>

<script>
$(document).on('change','.theme',function(){
      alert(this.value);
    });
</script>

如何将this.value添加到窗口小部件JS代码theme参数？

Answer 1

我想你应该把新的widget代码放在一个函数中并从args访问theme：

<script type="text/javascript">
function themeChanger(theme){
  var themeWidget = new TradingView.widget({
    "width": 500,
    "height": 400,
    "interval": "1",
    "timezone": "Etc/UTC",
    "theme": theme,
    "style": "2",

  }); 
  return themeWidget;
}

$(document).on('change','.theme',function(){
   var widget = themeChanger(this.value);
   // do something with widget.
});

</script>

Answer 2

您可以使用全局变量

var chartParams={
  "width": 500,
  "height": 400,
  "interval": "1",
  "timezone": "Etc/UTC",
  "theme": "White",
  "style": "2",

}
new TradingView.widget(chartParams);
$(document).on('change','.theme',function(){
     chartParams["theme"]=this.value
     new TradingView.widget(chartParams);
    });

在change事件上为现有的javascript代码添加值

2 个答案: