【发布时间】：2016-10-20 14:18:30
【问题描述】：
我有一些代码可以从 A 开始递增给定单词的每个字母，直到到达目标字母。您可以在下面的代码 sn-p 中看到示例。当我以单个 div id 为目标时，该代码有效，但我想这样做，因此它将这种递增的文本效果应用于每个文本块，并分配有“块”类。
$(document).ready(function() {
console.log("ready!");
$('.block').each(function() {
function Letter(table, letter, duration) {
this.table = table;
this.letter = letter;
this.current = 0;
this.delay = duration / tbl.indexOf(letter); // ms
this.time = Date.now();
this.done = false;
}
Letter.prototype.update = function() {
if (this.done) return;
var time = Date.now();
if (time - this.time >= this.delay) {
this.time = time;
if (this.letter === this.table[this.current] || this.current === this.table.length) {
this.done = true;
} else {
this.current++;
}
}
};
var word = $(this).html();
console.log('Word: ' + word);
var tbl = " ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var letters = [];
word.toUpperCase().split("").forEach(function(l) {
letters.push(new Letter(tbl, l, 2500))
console.log(l);
});
(function loop() {
var txt = "",
isDone = true;
letters.forEach(function(l) {
l.update();
if (!l.done) isDone = false;
txt += l.table[l.current];
});
// output txt
//$("div#d").html(txt);
$(this).parent('.block').html(txt);
if (!isDone) requestAnimationFrame(loop);
else { /* done */ }
})();
});
});
我正在尝试将递增效果输出到每个文本位上，并为其分配“块”类：
$(this).parent('.block').html(txt);
我正在尝试使用上述代码行来定位每个“块”类，但它不起作用。我该怎么做？
注意这一行的“单词”被递增是落在“块”标签内的任何内容：
var word = $(this).html();
$(document).ready(function() {
console.log("ready!");
$('.block').each(function() {
function Letter(table, letter, duration) {
this.table = table;
this.letter = letter;
this.current = 0;
this.delay = duration / tbl.indexOf(letter); // ms
this.time = Date.now();
this.done = false;
}
Letter.prototype.update = function() {
if (this.done) return;
var time = Date.now();
if (time - this.time >= this.delay) {
this.time = time;
if (this.letter === this.table[this.current] ||
this.current === this.table.length) {
this.done = true;
} else {
this.current++;
}
}
};
var word = $(this).html();
console.log('Word: ' + word);
var tbl = " ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var letters = [];
word.toUpperCase().split("").forEach(function(l) {
letters.push(new Letter(tbl, l, 2500))
console.log(l);
});
(function loop() {
var txt = "",
isDone = true;
letters.forEach(function(l) {
l.update();
if (!l.done) isDone = false;
txt += l.table[l.current];
});
// output txt
//d.innerHTML = txt;
$("div#d").html(txt);
if (!isDone) requestAnimationFrame(loop);
else { /* done */ }
})();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=d></div>
<div id="other_spans">
<span class="block">First</span>
<span class="block">Second</span>
<span class="block">Third</span>【问题讨论】：
-
应该在哪里返回结果？到相同的
#d元素？ -
不是你要问的，但是
Letter()构造函数和update()方法不能在.each()循环之前声明吗？它们实际上并不是循环逻辑的一部分。另外，我希望您不介意，但我编辑您的问题只是为了修复代码的缩进（实际代码本身没有更改），因为很难看到每个块的结束位置。 -
@guest271314 每个结果都返回相应的“.block”类元素。换句话说，在上面的例子中，“First”、“Second”和“Third”都会显示递增效果，因为它们周围有“块”跨度
-
因此，您希望的行为是“First”一词应在其跨度中就地进行动画处理，而与将在 它的跨度等？然后根本不需要ID为“d”的div？而当整个事情完成后，他们应该再次展示他们原来的话，还是......？
-
@nnnnn 是的，这完全正确。要增加的每个“单词”值都来自“块”范围内的文本。递增发生在每个字母的范围内，从 A 开始，然后最终结果是原始单词显示。
标签： jquery class this each parent