Fatal编程技术网
  • javascript/
  • 一个更高效的突出显示函数JavaScript代码？

一个更高效的突出显示函数JavaScript代码？

javascript jquery html arrays function

一个更高效的突出显示函数JavaScript代码？,javascript,jquery,html,arrays,function,Javascript,Jquery,Html,Arrays,Function,这就是我需要清理的功能： 我需要创建一个功能，观众可以点击一个句子中的任何单词，它将被突出显示。但是，我需要使它一次只突出显示一个单词。例如，如果你点击单词“你”，然后你改变主意，点击单词“鹰”，那么单词“你”将被取消选择 已经有了它的代码，但是我们的工作期限非常紧迫，如果我们使用这个非常长、非常难以导航的代码进行编辑和调整，那么我们将花费大量宝贵的时间制作一个5分钟的互动 这就是它的样子： 这是JS的一个片段（因此您可以看到问题）： （HTML和JS代码可根据要求提供） 因此，我们可能不需

这就是我需要清理的功能：

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

已经有了它的代码，但是我们的工作期限非常紧迫，如果我们使用这个非常长、非常难以导航的代码进行编辑和调整，那么我们将花费大量宝贵的时间制作一个5分钟的互动

这就是它的样子：

这是JS的一个片段（因此您可以看到问题）：

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

因此，我们可能不需要经历漫长的地狱，我想的是通过数组传递每个句子，这样每个单词就已经被分配到一个名称。这样，我们就可以通过for循环调用每个数组，在页面上打印出来，并使用arrayName[i]调用单个单词进行高亮显示。然后可能是if-else语句，以便只突出显示选定的单词

我一直在尝试通过数组推送实际的HTML元素，比如，只为每个
或其他内容获取
，但这似乎是不可能的。。。如果是的话，请告诉我是怎么做的，如果不是的话，我仍然会很感激其他的选择

我一辈子都无法独自解决所有的硬编码问题，因为我现在只知道这么多关于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";
    }
如果内容量有限，这可能会起作用，否则您可能会在加载时遇到一些延迟

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

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

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

根据@DrewGoldsBerry的回答，并附带一些示例代码。下面是一组有效的代码：

使用类设置HTML，以指示哪些行应该具有突出显示功能

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

我将所有答案检查添加到单击函数本身。应该是相当直截了当的。

类似于Jorg的解决方案，但有一些变化。我用split（）和join（）而不是regex完成了包装。我还倾向于将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>


$（文档）.ready（函数（）{
var p=$（“p”，“myDiv”）；
美元。每个（p，功能（i，obj）{
美元（obj）
.attr（“类”、“可高亮显示”）；
obj.innerHTML=“”+obj.innerHTML.split（“”）。join（“”+“”）；
});
$（“.highlightable span”和“#myDiv”）
.on（“单击”，函数（）{
$（“span”，$（this.parent（））
.css（“背景色”）；
$（本）
.css（“背景色”）、“#ffff45”）；
});
});
这里有一句话

这是另一句话

这里还有一句话
很抱歉增加了噪音。。。我的答案与Jorgs和Roberts非常相似，它还检查了有效答案

JS Fiddle在这里：

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>
如果你关心人们作弊，这部分应该在服务器上完成，这样就不会暴露给客户端。

你怎么知道哪个答案是正确的？它在HTML标记中可用，还是只存在于JS中？@wheels:它只存在于JS中。为您添加了一个编辑，以便您可以查看
checkAns（）
函数：）您是否有jQuery或其他DOM util库可用？@wheels:我有jQuery-1.9.1和jQuery ui:）如果您需要在我的解决方案中检查答案，您只需传递所选的单词，而不是特殊的数字。在某些方面使它更容易，因为它不使用代码。非常感谢你的代码！！！你不知道这有多大帮助！！但是有可能用这个来检查答案吗？比如检查正确的跨距是否有特定的css，并为突出显示的每个正确跨距增加一个
var correct
？对不起，我链接到了一个旧版本。。。给我一点时间。 
<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>

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