All geek questions in one place

More efficient JavaScript code for highlight function?

So this is the functionality I need to clear:

I need to create a function in which viewers can click any word in a sentence and it will be highlighted. However, I need to make sure that only one word stands out at a time. For example, if you press the word “you,” and then change your mind and press the word “eagle,” then the word “you” will be canceled.

We already have the code, but we are working in a very short time, and if we make changes and adjustments using this extremely long, extremely difficult to navigate code, then we will use so many precious weeks that produce a single 5-minute interactivity.

Here's what it looks like:
http://bit.ly/PeKOxH

And this is a JS snippet (so you can see the problem):
http://bit.ly/PeMY0l

( 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";
    }
+4
4

@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/

. .

+3

, ... Jorgs Roberts, .

JS Fiddle :

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

checkAns , answer selectedAnswer.

HTML :

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

, , , .

+2

, , .

, . , "" . temp span . span . 2 . hover, onclick , for. , , lol, jsfiddle, .

, . , .

, , . , , !

+1
source

A similar solution for Jörg with some variations. I did wrapping with split () and join () instead of regex. I also tend to put my jQuery chains on separate lines for visual clarity.

<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>
+1
source

Source: https://habr.com/ru/post/1534569/

More articles:


All Articles