为何js-cookie无法作用于href值？请求技术协助

嘿，我帮你找出第一个代码跑不起来的几个关键问题啦，对比你那个正常运行的示例就能清晰看到差异：

1. attr() 方法的用法错误 #

第一个示例里的这段代码是核心问题：

if (href_name){
 $('#switch_style').attr(href_name);
}

jQuery.attr() 方法如果只传一个参数，它的作用是获取对应属性的值，而不是设置属性！你需要像点击事件里那样，明确指定要设置的属性名（这里是href）和对应的值，也就是写成 attr("href", 具体值) 的形式。

而第二个示例里的 addClass(box_color) 是正确的，因为 addClass() 本身就是接收类名字符串作为设置参数，和 attr() 的逻辑不一样。

2. 缺失初始默认状态的设置 #

第一个示例的 else 代码块是空的，当 cookie 不存在时，你没有给 #switch_style 设置默认的 href 值。而第二个示例会在 else 里给元素加上默认的black类，保证页面加载时就有正常的初始状态。

3. 可选优化：Cookie 路径设置（避免刷新后丢失） #

有时候如果不指定 cookie 的路径，它可能只会在当前页面路径下生效，刷新或者跳转后就找不到了。可以在设置 cookie 时加上 path: '/' 参数，确保全站都能读取到这个 cookie。

修正后的完整代码 #

// Set Default
var names = ['car', 'bus'];
// Get Cookie
var href_name = $.cookie('href_name');
// Cookie Exists
if (href_name){
  // 正确使用attr：第一个参数是属性名，第二个是要设置的值
  $('#switch_style').attr("href", href_name);
}
// Cookie Doesn't Exist - 设置默认的href值
else {
  $('#switch_style').attr("href", 'car'); // 用默认的car作为初始链接
}
$('#box').on('click', function(){
  $("#switch_style").attr("href", 'bus' );
  // 添加path参数，确保cookie在全站范围内有效
  $.cookie('href_name', 'bus', { path: '/' });
});

这样修改后，点击#box会切换href为bus并写入cookie，刷新页面后会读取cookie并保持修改后的状态，页面加载时也会有默认的car链接值啦。

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