jQuery如何在多个同名class元素中选中点击按钮同列的目标元素

你写的代码直接全局调用$(".hexpaletteval")，会选中页面里所有带这个class的元素，没有把查找范围限定在当前点击按钮所在的列，才会出现所有元素都被设置黄色背景、取值不对的问题。

你的HTML结构本身是合理的，每个按钮和对应颜色值都包裹在同一个.colorcoloumn列容器里，只要在点击时先锚定当前列，再在列内查找目标元素即可。替换原有JS代码为如下内容：

$(".favcolor").click(function() {
  // 锚定当前点击按钮所属的列容器
  const $currentCol = $(this).closest(".colorcoloumn");
  // 仅在当前列范围内查找hex值元素
  const $hexEl = $currentCol.find(".hexpaletteval");
  // 注意.hexpaletteval是普通div，不是表单元素，用text()取内部文本
  const hexVal = $hexEl.text().trim();

  // 仅给当前列的hex元素设置黄色背景
  $hexEl.css("background-color", "yellow");

  $.ajax({
    type: "POST",
    url: "/favorite",
    data: {
      colorhex: hexVal,
      colorrgb: hextorgb(hexVal), // 请提前定义好hex转rgb的hextorgb方法
    },
    success: function(res) {
      console.log(res);
    }
  })
});

• 事件回调里的$(this)指向当前被点击的favcolor按钮，是做范围限定的起点
• .closest(".colorcoloumn")会从当前按钮开始向上查找DOM树，拿到最近的一层列容器，不会匹配到其他列
• .find()只会在当前列容器的后代元素里查找目标元素，从根源上避免选到其他列的同名class元素
• 非表单元素（div、p、span等）不要用.val()取值，取纯文本内容用.text()即可。

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