javascript - 突出显示链接的特定 div (tds) 悬停

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

演示

使用class

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

演示

如果您想.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');
    }
});

演示

Answer 2

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

Answer 3

首先，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/