如何使用数组修改HTML元素属性？随机名言脚本运行异常求排查

核心问题清单 #

• 事件绑定逻辑错误：给#newquote按钮绑定点击事件时，写为getQuote()会直接执行函数，而非将函数作为回调绑定到点击事件，正确写法应该去掉括号传入函数引用getQuote
• 多余的$(document).ready嵌套：getQuote函数内部不需要再套$(document.ready)，该回调仅用于DOM加载完成后的初始化逻辑，函数运行时DOM已完成加载，嵌套会导致动画和DOM更新逻辑无法按预期时序执行
• 选择器匹配不到不存在的DOM元素：代码中使用的$('.social-icons .fa-twitter')、$('blockquote footer')、$('blockquote')等选择器，在提供的HTML代码中不存在对应元素，属于无效代码
• 文本颜色与背景色冲突：给html body设置动画时，背景色和文本颜色都用了同一个随机色值，会导致文本和背景融为一体，完全不可见
• 原生jQuery不支持颜色属性动画：默认的jQuery animate方法无法直接对backgroundColor、color这类颜色属性做动画效果，需要额外引入jQuery Color插件，或者改用CSS transition实现颜色过渡

修正后代码 #

修正后的JS代码 #

// 需先引入jQuery和jQuery Color插件，否则颜色动画不生效
var colors = [
  '#490A3D',
  '#BD1550',
  '#E97F02',
  '#F8CA00',
  '#8A9B0F',
  '#69D2E7',
  '#FA6900',
  '#16a085',
  '#27ae60',
  '#2c3e50',
  '#f39c12',
  '#e74c3c',
  '#9b59b6',
  '#FB6964',
  '#342224',
  '#472E32',
  '#77B1A9',
  '#73A857'
];

var quotes = [
  ["You only live once, but if you do it right, once is enough.", "Mae West"]
]

var currentQuote = "";
var currentAuthor = "";
var randomquote = "";
var randomcolor = "";

function getQuote() {
  randomquote = Math.floor(Math.random() * quotes.length);
  randomcolor = Math.floor(Math.random() * colors.length);
  currentQuote = quotes[randomquote][0];
  currentAuthor = quotes[randomquote][1];

  $('html body').animate({
    backgroundColor: colors[randomcolor],
    color: '#fff' // 文本颜色固定为白色，避免和背景撞色
  }, 500);
  $('#newquote').animate({
    backgroundColor: colors[randomcolor]
  }, 500);
  $('#quotetext').animate({
    opacity: 0
  }, 500, function() {
    $(this).animate({
      opacity: 1
    }, 500);
    $(this).text(currentQuote);
  });
  $('#quotesource').animate({
    opacity: 0
  }, 500, function() {
    $(this).animate({
      opacity: 1
    }, 500);
    $(this).text(currentAuthor);
  });
}

$(document).ready(function() {
  getQuote();
  // 绑定点击事件，传入函数引用而非直接执行
  $('#newquote').on('click', getQuote);
});

若不想引入jQuery Color插件，可改用CSS transition实现颜色过渡，修改CSS如下： #

body {
  background:#16a085;
  transition: all 0.5s ease;
}
.btn-primary {
  width: 100px;
  height: 40px;
  background:#490A3D;
  transition: all 0.5s ease;
}
h2, footer {
  transition: all 0.5s ease;
}

内容的提问来源于stack exchange，提问作者Dezynarh