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>

Answer 2

var listItems = $('ul li');

$.each( listItems , function() {
   $(this).mouseenter(function(){
      varclassSelected = $(this).attr('class');
      $('table tr td').each(function (index, value) {
            var matchClass = $(this).attr('class');
            if (matchClass === varclassSelected) {
                $(this).addClass('bg');
            }
        });
   }).mouseleave(function(){
       $('table tr td').removeClass('bg');
   })
});

ul li:hover {
   cursor: pointer;
}
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="list1">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 3

是否通过在tr上添加：hover来解决您的问题：

table {
  border-collapse:collapse;
}

td {
  border:1px solid;
}

tr:hover {
  background-color: red;
}

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

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

3 个答案: