在另一个函数中使用时使用 $(this) 引用 Clicked 元素答案

【问题标题】：Refer the Clicked element using $(this) when used in another function在另一个函数中使用时使用 $(this) 引用 Clicked 元素
【发布时间】：2015-09-08 03:05:29
【问题描述】：

当 '$(this)' 用于在外部创建的函数中或在 click 方法之外的其他位置时，如何使用 '$(this)' 引用被点击的元素。 .以下是 HTML 标记的使用演示

<table>
    <tr>
        <td>some value...</td>
        <td>some value...</td>
        <td>some value...</td>
    </tr>
    <tr>
        <td>some value...</td>
        <td>some value...</td>
        <td>some value...</td>
    </tr>
    <tr>
        <td>some value...</td>
        <td>some value...</td>
        <td>some value...</td>
    </tr>

</table>

在我的 Jquery 中，我有以下代码：

$(document).ready(function () {
    var td = $('td');
    var count = 0;
    td.click(function () {
        if (count == 0) {
            //do this
        } else {
            //run this function
            demo();
        }
    })
})

function demo() {
    $(this).css('color', 'red'); // How do I refer to the clicked as $(this) here 
}

【问题讨论】：

当前在您的示例中计数始终为 0...

标签： javascript jquery html javascript-events

【解决方案1】：

错误/建议：

你拼错了ready
count 不会在您的代码 sn-p 中递增，因此 else 将永远不会执行（我已在下面的代码中递增）
使用=== 将count 与0 进行比较

您可以将$(this) 作为参数传递给demo() 函数。

演示：

$(document).ready(function() {
  var td = $('td');
  var count = 0;
  td.click(function() {
    if (count++ === 0) {
      //do this
    } else {
      // Send the context as parameter
      demo($(this));
    }
  });
})

function demo(el) {
  el.css('color', 'red');
  // el here is the `td` that is clicked
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr>
    <td>some value...</td>
    <td>some value...</td>
    <td>some value...</td>
  </tr>
  <tr>
    <td>some value...</td>
    <td>some value...</td>
    <td>some value...</td>
  </tr>
  <tr>
    <td>some value...</td>
    <td>some value...</td>
    <td>some value...</td>
  </tr>

</table>

您还可以使用call() 或apply() 将this 上下文绑定到demo() 函数，并在demo 函数中将其用作this。

$(document).ready(function() {
  var td = $('td');
  var count = 0;
  td.click(function() {
    if (count++ === 0) {
      //do this
    } else {
      //run this function

      demo.call($(this));
      // Don't just call the function, also change the context to the passed context
    }
  });
})

function demo() {
  this.css('color', 'red');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr>
    <td>some value...</td>
    <td>some value...</td>
    <td>some value...</td>
  </tr>
  <tr>
    <td>some value...</td>
    <td>some value...</td>
    <td>some value...</td>
  </tr>
  <tr>
    <td>some value...</td>
    <td>some value...</td>
    <td>some value...</td>
  </tr>

</table>

【讨论】：

【解决方案2】：

将this 的值作为参数传递给demo。

【讨论】：

如果您分享生成的代码并解释您的答案会更好。
对不起，我是用手机接电话的。

【解决方案3】：

这里如何将点击的称为$(this)

答案是：你不应该。您应该将元素传递给函数。如果您真的想使用this 来引用DOM 元素，则需要使用call 或apply 为demo 函数指定上下文：

$(document).read(function(){
 var td = $('td');
 var count = 0;
 td.click(function() {
    demo.apply(this);
  })
})

function demo() {
 $(this).css('color', 'red'); 
}

【讨论】：

【解决方案4】：

您可以只绑定到td 元素的点击事件，如果它不存在，该函数将永远不会触发：

$('td').on('click', function(){
  // if you need to know how many tds you can do this:
  // var cellNum = $('td').length;
  // console.log(cellNum);

  turnRed($(this));
});

function turnRed(el){
  el.css({"background-color" : "red"});
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tr>
   <td>some value...</td>
   <td>some value...</td>
   <td>some value...</td>
 </tr>
 <tr>
   <td>some value...</td>
   <td>some value...</td>
   <td>some value...</td>
 </tr>
 <tr>
   <td>some value...</td>
   <td>some value...</td>
   <td>some value...</td>
 </tr>

</table>

如果页面上有其他 td 是您不想考虑的，您可以使用表格上的 id 或类来隔离您感兴趣的单元格（示例）：

$('table.sometableClass > td').on('click', function(){});

【讨论】：