突出显示链接的特定div（tds）onhover

Question

所以我刚开始发现jquery是多么出色以及基本功能如何让我疯狂理解。我正在尝试突出显示通过后端生成的特定“id”的div

    <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>​

因此，如果我将鼠标悬停在“id_1”上方，我想突出显示“id_1”顶部和底部。下面是一个链接，因此它更容易理解。

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

谢谢！

Answer 1

您不得对不同的元素使用相同的id。

使用name即可

$('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

使用class

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

<强> DEMO

如果您想使用.on()进行悬停，请使用

$('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

Answer 2

首先，你不能为a和div拥有相同的ID。 ID应该是唯一的。 请改用数据。像那样：

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

然后在脚本中读取它：

$('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/

Answer 3

$('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");
    });
});

如上所述，id应该是唯一的。但如果不是我发现使用'[id ='而不是'＃'进行访问，则可以访问所有div，因为您将id视为属性。（请参阅：http://jsfiddle.net/4PgC6/68/）