在mouseover上移除另一个DOM对象中第n个元素的类 [英] On mouseover remove class of the nth element in another DOM object

问题描述

我有一张蓝色的桌子。当我将指针悬停在此表中的特定单元格上时，它应该在顶部红色表格中显示（addClass / removeClass）特定单元格，并在左侧红色表格中显示特定单元格（它们应该保持隐藏状态，除非将蓝色表格悬停）。

这是图片。

我已经包含 onmouseover =showDellCell（）在蓝表中的每个单元格中（并且在此Chrome拒绝向我显示我的jsfiddle之后）并且想要编写一个函数，该函数将会理解哪个单元格在蓝色表格中徘徊，并将两个相应单元格的类别更改为两个其他表格。我不能直接指出应该显示哪个单元格，因为表格是动态的，可以放大或缩小。这就是为什么找到蓝色单元格和两个相应的单元格红色表格之间的连接很重要的原因。

我猜可以通过第n个孩子，但我想通过最接近方法来做到这一点。这是上表的示例代码：

  function showDellCell（）{
 var columnDelIndex = $（td ，$（this）.closest（table））。index（this）; 
 $（$（'del-column'）[columnDelIndex]）。removeClass（hide）; 
 
} 
  

但不幸的是，它不起作用。你能帮我让它以合理的方式工作吗？ 这里是我的演示，但是Chrome又一次阻止了它的表现，可能是因为很多

解决方案

我移除了名为 showDellCell（）的函数 onmouseover 事件并更改您的活动

 < table class =my -table> 
< tr class =default-row> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< / tr> 
< tr> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< / tr> 
< tr> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< / tr> 
< tr> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< / tr> 
< / table> 
 $ b $（'。my-table tr td'）。mouseover（function（）{
 var columnDelIndex = $（td，$（this）.closest（table） ）.index（this）; 
 var col_num = $（'。my-table tr：first> td'）。length; 
 $（$（'。del-column-td'）[ parseInt（columnDelIndex％col_num）]）。removeClass（'hide'）; 
 $（$（'。del-row-td'）[parseInt（columnDelIndex / col_num）]）。 
}）
  

检查出来

注意：它只是解决了您的问题，但是当您点击添加行或列时， event onmouseover raise：D

更新：发表评论
如果我将指针移动到另一个蓝色单元格（或者将指针移出蓝色表格时将其隐藏起来），又如何隐藏不相关的红色单元格？

I have a blue table. When I hover the pointer over the particular cell in this table it should show (addClass/removeClass) particular cell in the top red table and particular cell in the left red table (they should stay hidden unless the blue table is hovered on).

Here is the pic.

I have included onmouseover="showDellCell()" in each cell of the blue table (and after this Chrome refuses to show me my jsfiddle) and want to write a function that will understand which cell is hovered in a blue table and change class of two respective cells in two other tables. I can not indicate directly which cell should be shown because the table is dynamic and can be enlarged or shrunk. That is why it is important to find the connection between the blue cell and two respective cell ins red tables.

I guess it is possible to do this via nth child, but I wanted to do this via closestmethod. Here is the example code for the top table:

function showDellCell() {
  var columnDelIndex = $("td", $(this).closest("table")).index(this);
  $($('del-column')[columnDelIndex]).removeClass("hide");

}

But unfortunately, it doesn't work. Can you please help me to make it work in any reasonable way? Here is my demo, but again, Chrome is blocking its performance, probably due to a lot of mouseover.

解决方案

I remove your function called showDellCell() on onmouseover event and change your event

<table class="my-table">
  <tr class="default-row">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

$('.my-table tr td').mouseover(function(){
    var columnDelIndex = $("td", $(this).closest("table")).index(this);
   var col_num = $('.my-table tr:first > td').length;
   $($('.del-column-td')[parseInt(columnDelIndex%col_num)]).removeClass('hide');
   $($('.del-row-td')[parseInt(columnDelIndex/col_num)]).removeClass('hide'); 
})

Check it out

Note : it just solves your question, but when you click add row or column, also event onmouseover raise :D

Updated : Issue in comment How is it possible to hide irrelevant red cells again if I move the pointer to another blue cell (or hide them all if I move the pointer out of the blue table)

这篇关于在mouseover上移除另一个DOM对象中第n个元素的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！