使用 javascript 更改文本中的不同单词

Question

我有一个文本，我希望能够创建一个小的 jquery / javascript 函数来根据我想要的单词周围的属性更改文本中的不同单词改变。

我这里有问题，但我现在还说不出是什么。这是它的样子：

https://jsfiddle.net/massiace/mq0cvn25/10/

我的文字：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Today I feel so <span id="1" class="change" w1="sad" w2="grumpy">happy</span> but 
I don't know exactly what to <span id="2" class="change" w1="eat" w2="like" w3="feel">do</span>.

所以我尝试创建一个 each 函数来迭代所有 "change" 类并将每个单词（假设我最多可以有 10 个单词）存储在单词变量中。任何帮助都是一种真正的祝福！！

$(document).ready(function(){
  $( ".change" ).each(function( index, obj ) {
    countId = 0;
    words = [];
    for(i=1 ; i>10 ; i++){
        if($(this).attr("w" + i)){
          words[i] = $(this).attr("w" + i);
        }
      };
    count = 0;
    setInterval(function () {
      count++;
      $(this).fadeOut(400, function () {
        $(this).text(words[count % words.length]).fadeIn(400);
      });
    }, 2000);
  });
});

https://jsfiddle.net/massiace/mq0cvn25/10/

Answer 1

您的代码中有很多错别字。整理并保持代码干净，你会自己发现很多问题。

阅读下面我的内嵌评论。

定义新变量时使用var。
Array.push 是向数组添加（追加）新元素的方式。
this 很棘手。 Learn to use it correctly.

$(document).ready(function() {
  $(".change").each(function(index, obj) {
    // Cache the current element.
    var $this = $(this);

    // Use "var" to define variables.
    var words = [];
    var count = 0;
    var attr;

    // First issue: "i>10" that you have makes it an infinite loop.
    for (var i = 1; i < 10; i++) {
      attr = $this.attr("w" + i);
      if (attr) {
        // Use push to add a new element to an array.
        words.push(attr);
      } else {
        // No more attributes on this element, break the loop.
        break;
      }
    };

    setInterval(function() {
      count++;

      // The "this" keyword inside this anonymous function is not the same "this" as above.
      // Now you benefit from having the current element stored in "$this".
      $this.fadeOut(400, function() {
        $this.text(words[count % words.length]).fadeIn(400);
      });
    }, 2000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Today I feel so <span id="1" class="change" w1="sad" w2="grumpy">happy</span> but I don't know exactly what to <span id="2" class="change" w1="eat" w2="like">do</span>.

Answer 2

不确定是否适合您，但我用逗号分隔的单词替换了一个数据字属性的 w1 w2... 属性。使用 String.prorotype.split() 方法很容易将它们解析为数组。现在代码对我来说似乎更优雅。 :)

$(document).ready(function(){
  $('.change').each(function(){
    slideWords($(this).attr('id'));
  });
});

function slideWords(getSpanId){
  var span = $("#"+getSpanId);
  var words = $(span).attr('data-words').split(',');

  repeat(0);
  function repeat(iter){
    $(span).text(words[iter]).fadeIn(400).delay(2000).fadeOut(400, function(){
      var next = !words[iter+1] ? 0:iter+1;
      repeat(next);
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Today I feel so <span id="1" class="change" data-words="sad,grumpy,good,excited"></span> but I don't know exactly what to <span id="2" class="change" data-words="eat,like,do"></span>.

使用 javascript 更改文本中的不同单词

change different words in text with javascript

jquery

words

function