изменить разные слова в тексте с помощью 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>. 

Так что я попытался создать каждую функцию для перебора всех «изменение» классов и для хранения каждого слова (скажем Я могу иметь максимум 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

У вас есть довольно много опечаток в вашем коде. Уберите и сохраните свой код в чистоте, и вы обнаружите множество проблем самостоятельно.

Прочтите мои комментарии ниже.

1. Использовать var при определении новых переменных.
2. Array.push - как вы добавляете (добавляете) новые элементы в массив.
3. this в JavaScript сложно. 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>.