如何结合class与id属性选择HTML元素及代码场景解决方案

嘿，我看你遇到了jQuery选择器的写法问题，咱们一步步来解决：

首先，你当前代码里的$(z'.comp1')是错误的写法——jQuery选择器需要正确的语法来同时匹配ID和Class。

正确的ID+Class选择器写法 #

要选择同时拥有某个ID和某个Class的元素，语法是：$('#目标ID.目标Class')

• #用来指定ID，.用来指定Class，两者直接连在一起（不要加空格，空格代表“后代元素”，不是同一个元素的属性）。

适配你的变量场景 #

因为你用变量z存储了目标元素的ID，所以需要把变量和选择器字符串拼接起来，正确的写法是：$('#' + z + '.comp1')

修复后的完整函数 #

把你的代码改成这样就可以正常工作了：

function openCompare(y) {
  var z = y.id;
  $(y).hide();
  $('#' + z + '.comp1').show();
}

额外的重要提醒 #

这里得提一句：HTML规范里要求ID在整个文档中必须是唯一的，你说存在另一个和按钮相同ID的元素，这其实是不符合规范的，很可能会导致后续的选择器行为异常（比如浏览器只会匹配第一个出现的ID元素）。

如果你需要给多个元素关联同一个标识，建议改用data-*自定义属性，比如给元素加data-compare-id="xxx"，然后用这个属性来选择：

// 假设触发按钮的data-compare-id是目标元素的标识
var compareId = $(y).data('compare-id');
$('[data-compare-id="' + compareId + '"].comp1').show();

这样既符合规范，也能避免ID重复带来的问题。

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