我的页面有5个复选框
每一个人都代表一种颜色
在我的html中，有一段长长的文字，里面有很多单词，用a包起来，每一个跨度都有基于城市的类。
当用户在复选框中勾选墨尔本一词时，跨度和类别中的所有单词都会有粉红色背景。
当取消勾选时，背景就会消失。
.Melbourne {
background-color: pink;
}
.Vancouver {
background-color: red;
}
<div>
<input id="cbxMelbourne" name="cbxMelbourne" type="checkbox" checked="checked" /><label for="cbxMelbourne">Melbourne</label>
<input id="cbxVancouver" name="cbxVancouver" type="checkbox" checked="checked" /><label for="cbxVancouver">Vancouver</label>
<input id="cbxLondon" name="cbxLondon" type="checkbox" checked="checked" /><label for="cbxLondon">London</label>
</div>
我的想法是根据复选框的勾来改变类的值
这可能吗？
是否有更好的方法来实现？
正如上位者回答说，他们绝对要使用的是 <span> - 这意味着我们必须使用JavaScript。
假设你不能改变 任何 HTML（除了插入一个 <script> 进入 <head> 元素）并添加CSS样式，那么我会这样做。
// Using a `Set` (which is a built-in Hashset type with O(1) lookup to avoid O(n) searches with a normal array).
const knownCities = new Set()
.add( 'Melbourne' )
.add( 'Vancouver' )
.add( 'London' );
// Rather than adding `click` event-listeners on all <span> elements, it's easier to add a single listener to <body>. This has the advantage of meaning we can add more <span> elements to the document after it's loaded and not have to add event-listeners to them either.
document.body.addEventListener( 'click', onBodyClick );
function onBodyClick( ev ) {
// first, verify that the click event was on a <span> that we're interested in:
const el = ev.target;
if( el.tagName == 'SPAN' && knownCities.has( el.className ) ) {
// The `toggle` function will add "Melbourne", "Vancouver", etc to <body> if it isn't there already, otherwise it will remove it. This means we don't need to check for it ourselves.
document.body.classList.toggle( el.className );
}
}span.Melbourne,
span.Vancouver,
span.London {
cursor: pointer;
text-decoration: underline;
text-decoration-style: wavy;
}
body.Melbourne span.Melbourne {
background-color: pink;
}
body.Vancouver span.Vancouver {
background-color: red;
color: white;
}
body.London span.London {
background-color: green;
color: white;
}Mark has left <span class="Melbourne">Doncaster East</span> on monday and
arrived to <span class="Vancouver">New Westminister</span> on sunday.
while Linda was living in <span class="Melbourne">Craigieburn</span> her
nephew was near by in <span class="Melbourne">Wanterna South</span> and his
friend still in <span class="London">London</span>你可以使用CSS的 "复选框触发 "技巧， 你可以重新使用一个隐藏的 "复选框"。<input type="checkbox" /> (或 radio)来交互式地重新设计页面，而无需使用JavaScript。
#melbourneTrigger,
#vancouverTrigger {
display: none;
}
label[for] {
cursor: pointer;
}
#melbourneTrigger:checked ~ .Melbourne,
#melbourneTrigger:checked ~ * .Melbourne,
#melbourneTrigger:checked ~ label[for=melbourneTrigger],
#melbourneTrigger:checked ~ * label[for=melbourneTrigger] {
background-color: pink;
}
#vancouverTrigger:checked ~ .Vancouver,
#vancouverTrigger:checked ~ * .Vancouver,
#vancouverTrigger:checked ~ label[for=vancouverTrigger],
#vancouverTrigger:checked ~ * label[for=vancouverTrigger] {
background-color: red;
}<input type="checkbox" id="melbourneTrigger" />
<input type="checkbox" id="vancouverTrigger" />
<div>
Mark has left <label for="melbourneTrigger">Doncaster East</label> on monday and
arrived to <label for="vancouverTrigger">New Westminister</label> on sunday.
while Linda was living in <label for="melbourneTrigger">Craigieburn</label> her
nephew was near by in <label for="melbourneTrigger">Wanterna South</label> and his
friend still in <label for="londonTrigger">London</span>
</div>按下 "运行代码片段 "按钮，即可看到它的工作。