Geek asks and answers

Highlight specific divs (tds) onhover links

So, I'm just starting to learn how awesome jquery is and how a basic function can make me think. I am trying to highlight a div with a specific "id" generated using backend

    <br/><br/><br/><br/>
<div id="id_1">
    <h2>id_1 - 
        <a class="marker_id_1" href="#top" name="id_1" id="id_1">Top</a>
    </h2>
</div>
<div id="id_1">
    <h2>id_1 - 
        <a class="marker_id_1" href="#top" name="id_1" id="id_1">Bottom</a>
    </h2>
</div>
<div id="id_2">
    <h2>id_2 - 
        <a class="marker_id_2" href="#top" name="id_2" id="id_2">Top</a>
    </h2>
</div>
<div id="id_2">
    <h2>id_2 - 
        <a class="marker_id_2" href="#top" name="id_2" id="id_2">Bottom</a>
    </h2>
</div>​

So, if I go above “id_1” above, I want to highlight both “id_1” Top and Bottom. Below is a link to this to make it easier to understand.

http://jsfiddle.net/4PgC6/66/

Thank!!

+5
source share
3 answers

You should not use the same idfor another element.

Using name, you can do

$('a').hover(function() {
  var name = this.name;
  $('a[name='+ name +']').css('color', '#f00')
},function() {
  var name = this.name;
  $('a[name='+ name +']').css('color', 'blue')
});

Demo

Using class

$('a').hover(function() {
  var className = this.className;
  $('a.' + className).css('color', '#f00')
},function() {
  var className = this.className;
  $('a.' + className).css('color', 'blue')
});

Demo

if you want to use .on()for freezing use

$('a').on('hover', function(e) {
    if (e.type == 'mouseenter') {
        var divName = this.name;
        console.log(divName);
        $('div', 'td.' + divName).addClass('match-highlight');
    } else {
        var divName = this.name;
        $('div', 'td.' + divName).removeClass('match-highlight');
    }
});

Demo

+6
source

, ID a div. . . :

<a href="#" data-id="id_1"></a>

script :

$('a').hover(function() {
  divID = $(this).data('id');
  $('#'+divId).css('color', '#f00');
},function() {
  divID = $(this).data('id');
  $('#'+divId).css('color', 'blue');
});

http://jsfiddle.net/acrashik/4PgC6/69/

0
$('div').mouseenter(function() {
   var hoveredid = $(this).attr('id'); 
    $('[id='+hoveredid+']').each(function() {
        $(this).addClass("highlighted");
    });
}).mouseleave(function() {
   var hoveredid = $(this).attr('id'); 
   $('[id='+hoveredid+']').each(function() {
        $(this).removeClass("highlighted");
    });
});

As already mentioned, the identifier must be unique. But if I did not find access to use using '[id =', and not “#”, you can access all divs, since you look at id as an attribute (see http://jsfiddle.net/ 4PgC6 / 68 / )

0
source

More articles:


All Articles