如何根据#infotitle1内容修改#bouton1背景色？jQuery代码不生效求解

你的代码逻辑失效的核心bug是：jQuery选择器无论是否匹配到目标元素，返回值始终是jQuery对象，而JavaScript中所有对象在条件判断中都会被判定为真值。因此你写的第一个if判断永远成立，无论#infotitle1内是否包含all文本，都会直接执行第一个分支把按钮设为灰色，后续的else if和else分支永远不会被触发。

额外注意：jQuery的:contains选择器是大小写敏感的子串匹配，只要元素文本中包含目标字符串就会命中，如果你需要完全匹配文本内容，不能直接依赖这个选择器。

你可以任选以下两种符合jQuery使用规范的写法实现需求：

方法1：读取文本后直接做字符串判断（推荐） #

先提取目标元素的文本内容再做判断，逻辑清晰可读性高，也能避免选择器判断的坑：

// 提前缓存DOM查询结果，减少重复性能开销
const $title = $("#infotitle1");
const $button = $("#bouton1");
// 读取文本并去除首尾空白，避免多余空格换行干扰判断
const titleContent = $title.text().trim();

if (titleContent.includes("all")) {
    $button.css("background-color", "#BEBEBE");
} else if (titleContent.includes("claims")) {
    $button.css("background-color", "#FF8B00");
} else {
    $button.css("background-color", "red");
}

如果需要文本完全等于目标值才触发（而不是包含子串就触发），把includes判断替换为全等判断即可，例如if (titleContent === "all")

方法2：校验选择器匹配的元素数量 #

如果要保留:contains选择器的写法，必须通过匹配集合的length属性判断是否真的命中元素，集合长度大于0才代表匹配成功：

const $button = $("#bouton1");
if ($("#infotitle1:contains('all')").length) {
    $button.css("background-color", "#BEBEBE");
} else if ($("#infotitle1:contains('claims')").length) {
    $button.css("background-color", "#FF8B00");
} else {
    $button.css("background-color", "red");
}

• 如果#infotitle1的文本内容会动态更新，你需要把上述判断逻辑封装为函数，在文本更新的时机主动调用，否则这段逻辑只会在页面初始加载时执行一次，无法跟随内容变化自动更新按钮样式
• 如果需要做不区分大小写的文本匹配，可以先把提取到的文本统一转为小写/大写再做判断，例如const titleContent = $title.text().trim().toLowerCase()
• 不建议在项目中过度使用:contains选择器做逻辑判断，直接读取元素文本做字符串匹配的可维护性更高

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