javascript - 用于突出显示功能的更高效的 JavaScript 代码？

Question

所以这是我需要清理的功能:

我需要创建一个功能，观众可以点击句子中的任何单词，它会突出显示。但是，我需要让它一次只突出显示一个词。例如，如果您点击“你”这个词，然后改变主意并点击“鹰”这个词，那么“你”这个词将被取消选择。

它已经有了现有的代码，但我们的工作期限非常紧迫，如果我们使用这个极长、极难导航的代码进行编辑和调整，那么我们将耗尽宝贵的几周时间来生产一次 5 分钟的互动。

这是它的样子:

这是 JS 的一个片段(所以你可以看出问题所在):

(可根据要求提供 HTML 和 JS 代码)

因此，与其让我们自己经历这个漫长的 hell ，不如让我考虑将每个句子传递给一个数组，这样每个单独的单词都已经分配给了一个名字。这样我们就可以通过 for 循环调用每个数组以将其打印在页面上，并使用 arrayName[i] 调用单个单词以进行突出显示。然后可能是一个 if-else 语句，因此只有选定的单词被突出显示。

我一直在尝试通过数组推送实际的 HTML 元素，例如，只得到 <p>对于每个 <div id="sentence1">或其他东西，但这似乎不可能......如果是，请告诉我它是如何完成的，或者如果不是，我仍然会感谢任何其他替代方案。

我这辈子都无法自己搞定所有的硬编码，因为我现在对 JavaScript 的了解有限，但我非常非常愿意学习!我们将在非常紧迫的截止日期前提供任何帮助，我们将不胜感激。

非常感谢您!请提供任何帮助或任何建议!

编辑

这是我们 checkAns() 的代码功能。它递增 var correct当每次都突出显示正确答案时checkAns()运行。它还负责将特定数字标记为错误或正确。

function checkAns(){
    document.getElementById('alertMsg').style.visibility = "hidden";


    if(Ans1B == "selected"){
        correct++
        document.getElementById('marksymbol1').className = "smile";
    }
    else
    {
        document.getElementById('marksymbol1').className = "sad";
    }
    if(Ans2A == "selected"){
        correct++
        document.getElementById('marksymbol2').className = "smile";
    }
    else
    {
        document.getElementById('marksymbol2').className = "sad";
    }
    if(Ans3A == "selected"){
        correct++
        document.getElementById('marksymbol3').className = "smile";
    }
    else
    {
        document.getElementById('marksymbol3').className = "sad";
    }
    if(Ans4A == "selected"){
        correct++
        document.getElementById('marksymbol4').className = "smile";
    }
    else
    {
        document.getElementById('marksymbol4').className = "sad";
    }
    if(Ans5A == "selected"){
        correct++
        document.getElementById('marksymbol5').className = "smile";
    }
    else
    {
        document.getElementById('marksymbol5').className = "sad";
    }

Answer 1

根据@DrewGoldsBerry 的回答，带有一些示例代码。这是下面代码的工作 fiddle :http://jsfiddle.net/E3D6T/1/

使用一个类来设置您的 HTML，以指示哪些行应该具有突出显示功能。

<p class="highlight">Each word will be wrapped in a span.</p>
<p class="highlight">A second paragraph here.</p>

在您的 JS 中，将 p 元素拆分为包含在 span 标签中的单词，然后可以将其绑定(bind)到点击功能:

// wrap words in spans
$('p.highlight').each(function () {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

// bind to each span
$('p.highlight span').click(function () {
    $(this).parent().find('span').css('background-color', '');
    $(this).css('background-color', '#ffff66');
});

编辑:

http://jsfiddle.net/jorgthuijls/E3D6T/16/

我将所有答案检查添加到点击功能本身。应该相当简单。