我有一些代码可以从A开始递增给定单词的每个字母，直到到达目标字母。您可以在下面的代码段中看到该示例。代码在我定位单个div id时起作用，但是我想这样做它会将这个递增的文本效果应用于每个文本块，使用＆＃34; block＆＃34;分配给它的课程。
$(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 */ }
})();
});
});
我尝试使用＆＃34; block＆＃34;将增量效果输出到每个文本位。分配给它的课程：
$(this).parent('.block').html(txt);
我试图针对每个＆＃34;阻止＆＃34;具有上述代码行的类但它不起作用。我怎么能这样做？
注意这一行＆＃34; Word＆＃34;被递增的是＆＃34;块＆＃34;内的任何内容。标记：
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>
答案 0 :(得分：1)
在你的代码中，IIFE中的这个是窗口对象。使用块类保持元素的引用，并在IIFE中使用它。如下 -
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let tintColor = TintManager().getTintColour()
let dateCell:TableHeader = tableView.dequeueReusableHeaderFooterViewWithIdentifier("TableHeader") as! TableHeader
//dateCell.bringSubviewToFront(dateCell.addNewEventButton)
dateCell.dayLabel.text = Dates.day.uppercaseString
dateCell.dateLabel.text = Dates.date
dateCell.backgroundView = UIView(frame: dateCell.frame)
dateCell.backgroundView!.backgroundColor = tintColor
dateCell.dayLabel.textColor = UIColor.whiteColor()
dateCell.dateLabel.textColor = UIColor.whiteColor()
dateCell.addNewEventButton.backgroundColor = tintColor
dateCell.addNewEventButton.tag = section
dateCell.addNewEventButton.layer.cornerRadius = 20.0
if (savedEventView.superview === self.view) {
dateCell.addNewEventButton.removeTarget(nil, action: nil, forControlEvents: .AllEvents)
dateCell.addNewEventButton.addTarget(self, action: #selector(ViewController.userPressedAddButtonToInsertSavedEvent(_:)), forControlEvents:.TouchUpInside)
} else {
dateCell.addNewEventButton.removeTarget(nil, action: nil, forControlEvents: .AllEvents)
dateCell.addNewEventButton.addTarget(self, action: #selector(ViewController.userPressedAddNewEventOnTableViewHeader(_:)), forControlEvents:.TouchUpInside)
}
return dateCell
}
答案 1 :(得分：1)
您可以将Letter函数和tbl变量移到.each()之外，以防止在元素的每次迭代中重新定义函数，变量;创建对$(this)当前元素的引用，使用loop
$(document).ready(function() {
console.log("ready!");
var tbl = " ABCDEFGHIJKLMNOPQRSTUVWXYZ";
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++;
}
}
};
$(".block").each(function() {
// store reference to current `this` element
var elem = $(this);
var word = elem.html();
console.log("Word: " + word);
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];
});
// `elem` : `this` element at `.each()` iteration
elem.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>