Question

我可以正常工作以下内容。但是我想知道使用$this仅一次而不是重复两次的最佳方法是什么来声明变量。

$('table tr td').mouseover(function(){

  var index = $(this).index() + 1,
  allColumn = $('table tr td:nth-child('+ index +')');

  allColumn.addClass('highlight');

});

$('table.data tr td').mouseout(function(){

  var index = $(this).index() + 1,
  allColumn = $('table tr td:nth-child('+ index +')');

  allColumn.removeClass('highlight');

});

Answer 1

其中一种方法是使用单个on方法附加所有事件，然后声明变量并检查事件类型。然后添加或删除类

$('table.data tr td').on('mouseover mouseout', function(e) {
  
    index = $(this).index() + 1,
    allColumn = $('table tr td:nth-child(' + index + ')');
  if (e.type === 'mouseover') {  // type of event
    allColumn.addClass('highlight');

  } else if (e.type === 'mouseout') {  // type of event
    allColumn.removeClass('highlight');
  }
})

.highlight {
  background: red;
  color: white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1px solid black" class="data">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

Answer 2

在这种情况下，您将无法执行您要的操作，因为在这种情况下，this是触发鼠标事件的确切元素的对象上下文。

如果您要定位单个元素而不需要确切地知道您要悬停在哪个索引项目上，则可以在作用域中声明一个比这两个函数更高的变量。但是，在这种情况下，您将无法在这两个函数的范围之外声明this并获得所需的结果。

在mouseover / mouseout事件中使用$ this关键字声明变量

2 个答案: