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

所以我尝试创建一个函数来迭代所有＆＃34;更改＆＃34;类和存储单词变量中的每个单词（假设我最多可以有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。

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

$(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);
    });
  }
}

＆＃13;

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

＆＃13;

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

2 个答案: