Question

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

我需要创建一个功能，观众可以点击句子中的任何单词，然后突出显示。但是，我需要这样做，因此一次只能突出显示一个单词。例如，如果您点击单词＆＃39;您＆＃39;然后你改变主意，然后点击“老鹰”这个词，然后点击“你＆＃39;你＆＃39;将被取消选择。

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

这就是它的样子：

这是JS的一个片段（所以你可以瞥见这个问题）：

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

因此，我们可能需要通过一个数组来传递每个句子，以便将每个单词分配给一个名称。那么我们就可以通过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的回答，用一些示例代码。以下是代码的工作小提琴：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/

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

Answer 2

很抱歉加入噪音...我的答案与Jorgs和Roberts非常相似，并且它还会检查有效的答案。

JS Fiddle在这里：

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

如果你关心人们作弊，这部分应该在服务器上完成，这样就不会暴露给客户。

Answer 3

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

首先将需要此功能的所有元素收集到一个数组中。将每个句子用“”作为变量拆分成另一个临时数组。逐步执行临时数组，使用新类在每个单词周围添加span标记。然后将带有span标记的新字符串返回到相应的元素。这可以用2个循环来减少。最后使用另一个for循环将hover和onclick绑定到每个新标记。对不起没有代码，我正在看tosh lol，但是如果你做了一个jsfiddle，我会为你写的。

就像我说的那样，一次不应该用很多句子来完成。如果你有多个部分，你总是可以错开句子。

希望这有助于解释我将如何做到这一点。祝你好运，让我知道会发生什么！

Answer 4

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>

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

4 个答案: