动态换词 Svelte

Question

我正在尝试使用数组更改单词，但出现此错误：

(plugin svelte) ValidationError: $ is an illegal variable name

这是我的代码：

<script>
 var words = [
    "one",
    "two",
    "pizza"
];
var t = setInterval(function($) {
  var randomNumber = Math.round( Math.random() * (words.length-1) );
  $('#changing').fadeOut("normal", function(){
        $('#changing').html( words[ randomNumber ] + "." ).fadeIn("normal");
    })
}, 4500);
</script>

<span id="changing">word</span>

我该如何解决这个问题？谢谢

Answer 1

我创建了一个可行的解决方案 here。（有更多的单词和更短的时间跨度来加快评估过程，但你可以恢复这些。）

基本上，您必须创建一个时间间隔并在每个间隔结束时更新一个变量。然后，在您的 HTML 中，您可以直接用大括号设置变量，如 REPL 中所示。

然后，要获取淡入淡出事件，我们可以使用 {#key <variable>} 块，它主要查找值的变化，然后 destroys/recreates 元素。一看就很简单

然后，我只是在底部设置了一些 css 样式，以便将所有元素内联。

动态换词 Svelte

Dynamic word change Svelte

svelte