CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
user2454455
user2454455

Reputation:

Having the right selectors for span with two classes

*HTML

<div id='board'>
<div>
    abc<span class='openCurly bm1'>{</span>
</div>
<div>
    'jkl'm<span  class='openParen bm2' >(</span>no<span class='closeParen bm2'>)</span>
</div>
<div>
    <span class= 'closeCurly bm1'>}</span>
</div>

*JS

$(document).ready(function() {
    $("#board").on("mouseenter mouseover", "[class*=bm]", function() {
        var className = $(this).attr('class').split(" ")[0];
        $("." + className).addClass("curlyHighlight");
    });
    $("#board").on("mouseleave mouseout", "[class*=bm]", function() {
        var className = $(this).attr('class').split(" ")[0];
        $("." + className).removeClass("curlyHighlight");
    });
});

*CSS

.curlyHighlight {
background-color: red;
font-weight: bold;

}

When i hover to either { or }, it will highlight both of them (partners). Same thing as hovering either ( or ). Here is my fiddle http://jsfiddle.net/yxVd9/10/

Upvotes: 2

Views: 87

Answers (2)

Sushanth --
Sushanth --

Reputation: 55740

You can have only one attribute of class for the element. It is invalid and will apply only the first instance of class attribute.

<span class='closeParen' class='bm2'>)<

Supposed to be :

    <span class='closeParen  bm2'>)<

And as for the selector you can use this:

`$('.closeParen.bm2')` to select the span

Fix your HTML first; it's supposed to like this:

<div id='board'>
    <div>
       abc<span class='openCurly bm1'>{</span>
    </div>
    <div>
     'jkl'm<span  class='openParen bm2' >(
         </span>no<span class='closeParen bm2'>)</span>
    </div>
    <div>
       <span class= 'closeCurly bm1'>}</span>
    </div>
</div>

JS

You can just reference the element using this context instead of finding the class.

$(document).ready(function() {
    $("#board").on("mouseenter mouseover", "[class*=bm]", function() {
        $(this).addClass("curlyHighlight");
    });
    $("#board").on("mouseleave mouseout", "[class*=bm]", function() {
        $(this).removeClass("curlyHighlight");
    });
});

The problem with the way you have written is you are selecting the elements directly using a class. So it will select all the elements of that class irrespective of the one over which it is hovered. Using this should take care of the issue.

Check Fiddle

Both the events can be bound to the selector with a single selection.

$(document).ready(function () {
     $("#board").on({
      mouseenter: function () {
          $(this).addClass("curlyHighlight");
      },
      mouseleave: function () {
          $(this).removeClass("curlyHighlight");
      }
        }, "[class*=bm]");
     });
});

Upvotes: 0

Hieu Le
Hieu Le

Reputation: 8415

If I understand your idea correctly, you are trying to highlight matching brackets. I point out something in your code.

First, your class property is not valid, you should combine them into one place.

<div id='board'>
    <div>
        abc<span class='openCurly bm1'>{</span> <!-- an example of merged classes -->
    </div>
    <div>
        'jkl'm<span  class='openParen bm2' >(</span>no<span class='closeParen bm2'>)</span>
    </div>
    <div>
        <span class= 'closeCurly bm1'>}</span>
    </div>
</div>

Second, I think you choose the wrong class to apply the effect, the correct index should be 1 (so the selected classes will be bm1 or bm2 instead of openCurly as current)

$(document).ready(function() {
    $("#board").on("mouseenter mouseover", "[class*=bm]", function() {
        var className = $(this).attr('class').split(" ")[1]; // index 1 instead of 0
        $("." + className).addClass("curlyHighlight");
    });
    $("#board").on("mouseleave mouseout", "[class*=bm]", function() {
        var className = $(this).attr('class').split(" ")[1]; // index 1 instead of 0
        $("." + className).removeClass("curlyHighlight");
    });
});

Updated Fiddle

Upvotes: 1

Related Questions