如何在loc值匹配data-spot时修改elementspot元素的opacity样式？

场景1：.elementspot 就是目标元素本身 #

如果带 data-spot 属性的元素直接拥有 .elementspot 类，你原来用的 find() 是查找子元素，这里应该换成 filter() 来筛选符合条件的元素。完整代码如下：

function showElement(loc) {
    // 重置所有.elementspot元素为隐藏状态（切换位置时需要保留这一步）
    $(".elementspot").css("opacity", 0);
    // 匹配data-spot值与loc一致的元素，设置为显示
    $(".elementspot").filter("[data-spot='" + loc + "']").css("opacity", 1);
}

场景2：.elementspot 是父元素，目标元素是其子元素 #

如果你的结构是 .elementspot 作为容器，带 data-spot 的是它的子元素，那可以直接在 find() 后链式调用 css() 方法修改样式：

function showElement(loc) {
    // 可选：重置所有子元素的透明度
    $(".elementspot [data-spot]").css("opacity", 0);
    // 定位到匹配的子元素并设置显示
    $(".elementspot").find("[data-spot='" + loc + "']").css("opacity", 1);
}

更安全的写法（避免字符转义问题） #

如果 loc 可能包含单引号这类特殊字符，用属性筛选函数更稳妥，不会出现选择器语法错误：

function showElement(loc) {
    $(".elementspot").css("opacity", 0);
    $(".elementspot").filter(function() {
        // 直接对比data属性值，无需担心特殊字符
        return $(this).data("spot") === loc;
    }).css("opacity", 1);
}

ES6+ 优化写法（更简洁） #

如果项目支持ES6语法，用模板字符串可以让选择器代码更易读：

function showElement(loc) {
    $(".elementspot").css("opacity", 0);
    $(".elementspot").filter(`[data-spot='${loc}']`).css("opacity", 1);
}

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