如何修改JS函数实现点击#myNav时随机切换颜色类？当前点击无刷新

嘿，我来帮你搞定这个问题～你的代码现在只在页面加载的时候执行了一次随机选色和添加类的操作，完全没有绑定点击事件，所以点击#myNav自然不会触发颜色切换。而且直接叠加类的话，旧的颜色类会留在元素上，可能导致样式冲突，我们需要先清理旧类再加新类。

修改后的完整代码 #

$(document).ready(function(){
  // 定义所有可选的颜色类数组
  var colors = ['black','blue','mistyrose','white'];
  
  // 封装颜色切换的逻辑成函数，方便复用
  function switchNavColor() {
    // 一次性移除所有已有的颜色类，避免样式冲突
    $('#myNav').removeClass(colors.join(' '));
    // 随机挑选一个新颜色
    var new_color = colors[Math.floor(Math.random() * colors.length)];
    // 给导航添加新的颜色类
    $('#myNav').addClass(new_color);
  }
  
  // 页面加载完成时先执行一次，设置初始颜色
  switchNavColor();
  
  // 给#myNav绑定点击事件，每次点击都触发颜色切换
  $('#myNav').click(switchNavColor);
});

关键改进点说明 #

• 封装重复逻辑：把选色、切换类的代码放进switchNavColor函数里，既可以在页面加载时初始化颜色，也能在点击时重复调用，避免代码冗余。
• 清理旧类：用colors.join(' ')把数组转成空格分隔的字符串（比如"black blue mistyrose white"），传给removeClass就能一次性移除所有颜色类，不会留下旧样式干扰新样式。
• 绑定点击事件：通过$('#myNav').click(switchNavColor)给导航元素绑定点击触发的动作，这样每次点击都会执行颜色切换逻辑。

可选优化：避免连续选中同一种颜色 #

如果你不想连续两次切换到同一个颜色，可以稍微修改switchNavColor函数，确保新颜色和当前颜色不同：

function switchNavColor() {
  // 获取当前导航上的颜色类
  var currentColor = $('#myNav').attr('class').split(' ').filter(cls => colors.includes(cls))[0];
  var new_color;
  
  // 循环随机选色，直到选到和当前不同的颜色
  do {
    new_color = colors[Math.floor(Math.random() * colors.length)];
  } while (new_color === currentColor);
  
  // 移除旧类并添加新类
  $('#myNav').removeClass(colors.join(' ')).addClass(new_color);
}

这样调整后，点击#myNav就会每次都切换到不同的随机颜色啦～

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