更改一组帖子中一个帖子的背景-JS

Question

我有一个页面，上面显示了一篇完整的帖子(Wordpress(，帖子下面是完整的帖子组(标题和摘录(，包括显示的帖子。当下面的帖子与上面完整显示的帖子相同时，我希望能够更改它的背景(标题和摘录(。

这是我的代码：

var title1 = document.querySelector(".subhead").innerText.toLowerCase();
var names = document.querySelectorAll('.case-names'),
result = [];
for (var i = 0; i < names.length; i++) {
result.push(names[i].textContent.trim().toLowerCase());
if (title1 == names[i]) {
document.querySelector(".case-bottom").style.backgroundColor = "red";
}
};

当我使用控制台日志时，我看到title 1＝joe smith；乔·史密斯；包含在名称数组中。我没有任何错误，但背景没有改变。

提前谢谢。

Answer 1

您需要将文本放在内联元素中，如span，然后将背景色应用于span。

HTML标记：

<h1 class="case-bottom"><span>The Last Will and Testament of Eric Jones</span></h1>

JavaScript:

if (title1 == names[i]) {
document.querySelector(".case-bottom span").style.backgroundColor = "red";
}

Answer 2

我没有测试代码，我不得不猜测您的DOM结构是什么。因此，我的代码可能与您的需求不完全匹配，但它应该足以向您展示您应该做什么

<div class="main-post"></div>
<div class="case-bottoms">
<div class="case-bottom>
<div class="case-name">Post Title</div>
<div class="case-excerpt">some text</div> 
</div>
</div>

let cases = document.querySelectorAll('.case-bottom');
[...cases].forEach(case => {
let caseTitle = case.querySelector(".case-names").trim().toLowerCase();
if (caseTitle == title1) {
case.style.backgroundColor = "red";
// I always prefer this:
case.classList.add(".is-reading");
} else {
// and this:
case.classList.remove(".is-reading");
}  

)