用於高亮功能的更高效的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代碼？

回答

相關問題