我的任务是获取一个段落中的所有单词,并让每个单词每秒切换一次随机颜色。
我写这个,认为它会让所有单词切换到相同的随机颜色,假设 $('span')
找到所有 span 元素并对所有元素执行相同的操作立刻。
但是,此代码将每个单词切换为不同 随机颜色,就好像它在每个span
上运行不同的makeHexColor
实例一样。我很困惑,正如我所想的那样,在 setInterval
中,makeHexColor
会首先评估一个随机字符串,然后将一个特定的字符串附加到所有跨度的颜色属性。
$(document).ready(function() {
var words = $('p').text().split(' ');
$('p').empty();
words.forEach(function(word) {
$('p').append($('<span>').text(word + ' '));
});
setInterval(function() {
$('span').css('color', makeHexColor);
}, 1000);
})
var makeHexColor = function() {
var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
var color = '#';
for (var i = 0; i < 6; i++) {
var random = Math.floor(Math.random() * 16);
color += hex[random];
}
return color;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
最佳答案
$('span').css
... 实际上由 jQuery 转译为一个循环,并且对于每次迭代,它都调用 makeHexColor
函数。
如果您希望所有单词都使用相同的颜色,请将您的 setInterval
更新为:
setInterval(function() {
var color = makeHexColor();
$('span').css('color', color)
},1000)
关于javascript - jQuery(element) 是逐个选择每个元素还是一次性选择所有元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51118648/