如何使用jQuery根据选中颜色元素向URL添加并传递参数实现跳转

没问题，我帮你搞定这个需求——点击不同颜色的色块后自动跳转到带对应颜色参数的URL对吧？下面是完整的实现方案，我会把细节讲清楚：

首先先确认你的HTML结构（和你提供的一致）：

<div class="color-class" data-color="red">
  <div class="inside-color">Red</div>
</div>
<div class="color-class" data-color="green">
  <div class="inside-color">Green</div>
</div>
<div class="color-class" data-color="blue">
  <div class="inside-color">Blue</div>
</div>

基础实现：跳转到当前页面并追加参数 #

如果你的需求是在当前页面URL后面加上?color=xxx参数，用这段代码就够了：

// 等页面DOM加载完成再执行代码，避免找不到元素
$(document).ready(function() {
  // 给所有带color-class类的元素绑定点击事件
  $('.color-class').on('click', function() {
    // 获取当前点击元素的data-color属性值
    const selectedColor = $(this).data('color');
    // 构造带参数的目标URL（保留当前页面的域名和路径）
    const targetUrl = `${window.location.origin}${window.location.pathname}?color=${selectedColor}`;
    // 触发页面跳转
    window.location.href = targetUrl;
  });
});

进阶实现：跳转到指定页面传递参数 #

如果需要跳转到某个固定页面（比如/color-detail.html），只需要修改targetUrl的构造逻辑：

$(document).ready(function() {
  $('.color-class').on('click', function() {
    const selectedColor = $(this).data('color');
    // 替换成你实际要跳转的页面地址
    const targetUrl = `/color-detail.html?color=${selectedColor}`;
    window.location.href = targetUrl;
  });
});

关键细节解释 #

• $(document).ready(...)：必须加这个，确保页面所有DOM元素加载完成后再绑定事件，不然可能出现点击事件无效的情况
• $(this).data('color')：用jQuery的data()方法直接读取元素的data-color属性，比原生的getAttribute('data-color')更简洁，还能自动转换数据类型
• window.location.href = targetUrl：用原生JS的跳转方法，稳定可靠，兼容性拉满

额外优化：解决内部元素点击无效问题 #

如果用户点击内层的inside-color元素时没反应（因为事件冒泡被阻止或者没绑定到内层），可以用事件委托来解决，这样不管点击色块的哪个部分都能触发跳转：

// 把事件绑定到document（或者更接近的父容器，比如一个包裹所有色块的div）
$(document).on('click', '.color-class, .inside-color', function(e) {
  // 找到最外层的color-class元素，确保能正确获取color参数
  const colorBlock = $(e.target).closest('.color-class');
  const selectedColor = colorBlock.data('color');
  const targetUrl = `/color-detail.html?color=${selectedColor}`;
  window.location.href = targetUrl;
});

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