javascript - jQuery(element) 是逐个选择每个元素还是一次性选择所有元素?

标签 javascript jquery html dom

我的任务是获取一个段落中的所有单词,并让每个单词每秒切换一次随机颜色。

我写这个,认为它会让所有单词切换到相同的随机颜色,假设 $('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/

相关文章:

javascript - AngularJS 范围整数未在模板上更新

jquery - 如何让我的背景图片循环播放

javascript - Stripe 支付 : Getting Error as Customer cus_***** does not have a linked card with ID tok_*****

html - 我的导航菜单上的列表项图标在 Safari/Firefox 之间显示不同

javascript - 使用 webpack 和 two.js 的问题

javascript - 如何根据数据属性获取 HTML 选择更改事件来触发 DIV 的显示/隐藏?

javascript - 使用ajax在HTML表中显示嵌套的json

html - 在 "content"内添加 css 元素

javascript - 我应该在执行 pushState 时更新所有 href 和 src 吗?

javascript - 在哪里放置 enableHighAccuracy 和其他地理定位设置