javascript - 根据列表鼠标悬停突出显示表数据

Question

根据我的代码片段，我有多个列表项和表格数据。我想根据我的列表在鼠标悬停时突出显示 td 。目前我只手动处理了一个列表。我想根据列表选择突出显示每个td。

$('.list1').mouseenter(function(){
   $('.listdiv1').addClass('bg');
}).mouseleave(function() {
   $('.listdiv1').removeClass('bg');
});	

table {
  border-collapse:collapse;
}

td {
  border:1px solid;
}

.bg {
  background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="list1">List 1</li>
<li class="list2">List 2</li>
<li class="list3">List 3</li>
<li class="list4">List 4</li>
</ul>
<table>
  <tr>
    <td>None</td>
    <td class="listdiv1">List 1</td>
  </tr>
  <tr>
    <td>None</td>
    <td class="list2">List 2</td>
  </tr>
  <tr>
    <td>None</td>
    <td class="list3">List 3</td>
  </tr>
  
  <tr>
    <td>None</td>
    <td class="list4">List 4</td>
  </tr>
</table>

Answer 1

尝试这样。

$('.dblmenu li').mouseenter(function(){
    debugger;
    var clsNm =$(this).attr('class').split(' ').slice(-1);
   $('td.'+clsNm+'div').addClass('bg');
}).mouseleave(function() {
    debugger;
    var clsNm =$(this).attr('class').split(' ').slice(-1);
   $('td.'+clsNm+'div').removeClass('bg');
});

table {
  border-collapse:collapse;
}

td {
  border:1px solid;
}

.bg {
  background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dblmenu">
<li class="accepted list1">List 1</li>
<li class="list2">List 2</li>
<li class="list3">List 3</li>
<li class="list4">List 4</li>
</ul>
<table>
  <tr>
    <td>None</td>
    <td class="list1div">List 1</td>
  </tr>
  <tr>
    <td>None</td>
    <td class="list2div">List 2</td>
  </tr>
  <tr>
    <td>None</td>
    <td class="list3div">List 3</td>
  </tr>
  
  <tr>
    <td>None</td>
    <td class="list4div">List 4</td>
  </tr>
</table>