在运行时更改类值答案

【问题标题】：Change class values at runtime在运行时更改类值
【发布时间】：2020-06-15 11:25:28
【问题描述】：

我的页面有 5 个复选框

墨尔本
伦敦
温哥华
巴黎
麦加

每一个都代表一种颜色

墨尔本（粉红色）
伦敦（蓝色）
温哥华（红）
巴黎（黄色）
麦加（绿色）

在我的 html 中有一个长文本，其中包含许多由 a 包裹的单词，并且每个跨度都有基于城市的类

当用户在复选框中勾选Melbourne这个词时，span和class melbourne中的所有词都将具有粉红色背景。

取消勾选后背景消失

.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>

马克周一离开唐卡斯特东，周日抵达新威斯敏斯特。当琳达住在克雷吉伯恩时，她的侄子就在南瓦特纳附近，他的朋友还在伦敦

我的想法是根据复选框勾选更改类值

这可能吗？

有没有更好的方法来实现这一点？

【问题讨论】：

使用onchange事件，设置一个JS函数
@Vaibhav JavaScript 根本不需要。他们可以使用“复选框触发器”技巧。

标签： html css

【解决方案1】：

正如 OP 回复说他们绝对必须使用 <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>

【讨论】：

点击复选框时可以这样做
墨尔本温哥华伦敦
@asmgx 您刚刚完全改变了问题，这使我现在的两个答案都无效。这不酷。您应该恢复原始问题（不带复选框）并重新发布带有复选框的新问题。
首先非常感谢您的回答，我提到的问题的第一句话有 5 个复选框，我需要勾选和取消勾选。我认为这很清楚，我只是添加了复选框脚本以使其更清晰，再次......非常感谢您的回答 - asmgx 刚刚编辑删除

【解决方案2】：

您可以使用 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>

按“运行代码 sn-p”按钮查看它的工作情况。

【讨论】：

谢谢，但是代码已经用构建了，我必须使用复选框勾选值而不是点击文本本身，可以这样做吗？
@asmgx 我想你的意思是<span>，而不是<snap> - 我现在会发布一个新的回复。
首先非常感谢您的回答，我提到的问题的第一句话有 5 个复选框，我需要勾选和取消勾选。我认为这很清楚，我只是添加了复选框脚本以使其更清晰，再次......非常感谢您的回答