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

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

我需要创建一个功能，观众可以单击句子中的任何单词，它就会突出显示。然而，我需要做到一次只突出显示一个单词。例如，如果您单击单词“you”，然后您改变主意并单击单词“eagle”，则单词“you”将被取消选择。

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

This is what it looks like:

And this is a snippet of the JS (so you can glimpse the problem):

（可根据要求提供 HTML 和 JS 代码）

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

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

我一生都无法独自弄清楚所有的硬编码，因为我现在对 JavaScript 的了解只有这么多，但我非常非常愿意学习！任何有关这方面的帮助将不胜感激，因为我们的工作期限非常紧迫。

提前非常感谢！请提供任何帮助或建议！

EDIT

这是我们的代码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";
    }

根据 @DrewGoldsBerry 的回答，带有一些示例代码。这是下面代码的工作小提琴：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标签，然后可以将其绑定到点击函数：

// 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');
});

edit:

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

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