我有一个文本,我希望能够创建一个小的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);
});
});
答案 0 :(得分: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);
});
});
&#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;
答案 1 :(得分:0)
不确定它是否适合您,但我用一个数据字属性替换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);
});
}
}
&#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;