用于高亮功能的更高效的JavaScript代码？

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

现在已经有了它的代码，但我们正在非常紧迫的最后期限内工作，如果我们使用这个非常长，非常难以导航的代码进行编辑和调整，那么我们将用尽这么多宝贵的周产生一次5分钟的互动。

这是什么样子：

这是JS（这样你就可以窥见这个问题）的一个片段：

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

因此，我们可能不需要这么长时间地狱，而是想通过一个数组来传递每个句子，所以每个单词都已经是assi变成了一个名字。因此，我们可以通过for循环将每个数组打印出来，然后使用arrayName [i]来调用单个单词以突出显示。然后也许是一个if-else语句，所以只有选中的单词被突出显示。

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

我不能为自己的生活弄清楚自己的所有硬编码，因为我现在只知道很多关于JavaScript的内容，但我非常非常愿意学习！任何与此有关的帮助将深受赞赏，因为我们正在紧张工作的最后期限。

非常感谢你提前！请任何帮助，或任何建议会做！

编辑

这是我们checkAns()函数的代码。当每次运行checkAns()时正确答案都会突出显示时，它会增加var correct。它也负责标记具体的数字是错的还是正确的。

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"; 
    }

来源

2014-04-02 Willow

你怎么知道哪个答案是正确的？它在HTML标记中可用，还是只存在于JS中？ – Wheeyls

@Wheeyls：它只存在于JS中。为您添加了一个编辑，以便您可以看到'checkAns（）'函数:) – Willow

您是否有jQuery或其他DOM util库可用？ – Wheeyls

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

编辑：

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

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

来源

2014-04-02 02:24:03 Jorg

非常感谢你这个代码！你不知道这有多大的帮助！但是可以用这个来检查答案吗？就像检查正确的跨度是否具有该特定的CSS并为每个突出显示的正确跨度增加一个“var correct”？ – Willow

当然，请参阅编辑 – Jorg

非常感谢你！ :) – Willow

这可能工作，如果内容的数量有限，否则您可能会遇到一些滞后负载。

从数组中收集所有需要这种能力的元素开始。使用“”作为变量将每个句子拆分为另一个临时数组。通过临时数组，在每个单词周围添加一个span标签，并添加一个新类。然后将带有span标签的新字符串返回给相应的元素。这可以用2 for循环来降低。最后通过使用另一个for循环将两个悬停和onclick绑定到每个新标签。对不起没有代码，我正在看tosh哈哈，但是如果你做一个jsfiddle我会为你写。

就像我说过的，这不应该与一次很多的句子。如果你有多个部分，你总是可以错开句子。

希望这有助于解释，我会怎么做。祝你好运，让我知道发生了什么！

来源

2014-04-02 02:08:23 DrewGoldsberry

如果您需要检查我的解决方案的答案你只需通过选择，而不是一个特殊的数字字。由于不使用代码，因此在某些方面更容易。 – DrewGoldsberry

Jorg的一个类似的解决方案，有一些变化。我已经用split（）和join（）来代替正则表达式。为了视觉清晰，我还倾向于将我的jQuery链放在单独的行上。

<html> 
<head> 
    <script type="text/javascript" src="./jquery.min.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function() { 
     var p = $("p", "#myDiv"); 
     $.each(p, function(i, obj){ 
      $(obj) 
       .attr("class", "highlightable"); 
      obj.innerHTML = "<span>" + obj.innerHTML.split(" ").join("</span> <span>") + "</span>"; 
     }); 

     $(".highlightable span", "#myDiv") 
      .on("click", function(){ 
       $("span", $(this).parent()) 
        .css("background-color", ""); 
       $(this) 
        .css("background-color", "#ffff45"); 
      }); 
    }); 
</script> 

</head> 
<body> 

<div id="myDiv"> 
    <p>Here is a sentence.</p> 
    <p>Here is another sentence.</p> 
    <p>Here is yet another sentence.</p> 

</div> 
</body> 
</html>

来源

2014-04-02 03:14:04

对不起，增加了噪音...我的答案是非常类似于Jorgs和罗伯茨，它也检查有效的答案。

JS小提琴是在这里：

http://jsfiddle.net/M7faZ/3/

的checkAns函数使用句子元素的ID，向answer对象映射到selectedAnswer对象。

的HTML精心挑选ID和类名：

<ul class='sentences'> 
    <li class='sentence' id='ans1'>Can you draw an eagle?</li> 
    <li class='sentence' id='ans2'>She is good in painting.</li> 
</ul> 

<div id='mark-symbol-ans1'></div> 
<div id='mark-symbol-ans2'></div>

而且JS有图的答案。

// get the list 
var $sentences = $('.sentence'), 
    answers = { 
     ans1: 'you', 
     ans2: 'She' 
    }, 
    selectedAnswers = {}; 

function checkAns() { 
    var correct; 

    for (var i in answers) { 
     correct = selectedAnswers[i] === answers[i] 

     $('#mark-symbol-' + i).toggleClass('smile', correct); 
     $('#mark-symbol-' + i).toggleClass('sad', !correct); 
    } 
}

如果你关心的人欺骗，这部分应该在服务器上完成，所以它不会暴露给客户端。

来源

2014-04-02 03:35:09 Wheeyls

小提琴似乎没有工作。 :( – Willow

对不起，我链接到旧版本...给我一秒 – Wheeyls

更新与工作版本。 – Wheeyls

用于高亮功能的更高效的JavaScript代码？

回答

相关问题