0
Aから始まり、目的の文字に達するまで、指定された単語の各文字をインクリメントするコードがあります。以下のコードスニペットでその例を見ることができます。このコードは、1つの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'要素に？ – guest271314
'Let（）'コンストラクタや 'update（）'メソッドを '.each（）'ループの前に宣言することはできませんでしたか？それらは実際にはループロジックの一部ではありません。また、あなたが気にしないことを願っていますが、各ブロックがどこで終了したのかがわかりにくかったため、コードのインデントを修正するだけで（実際のコード自体に変更はありません） – nnnnnn
@ guest271314各結果は、対応する ".block"クラス要素に返されます。言い換えれば、上の例では、 "First" "Second"と "Third"は、それらの周りに "block"スパンを持つため、すべて増分エフェクトを表示します – cpcdev