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

Question

当“$(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 
}

Answer 1

Bugs/Suggestions:

您拼写错误 ready
count 在你的代码片段中没有增加，所以 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()函数，并在[=]中将其用作this 27=]函数。

$(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>

Answer 2

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

Answer 3

How do I refer to the clicked as $(this) here

答案是：你不应该。您应该将元素传递给函数。如果你真的想用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'); 
}

Answer 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，您可以在 table 上使用 id 或 class分离您感兴趣的细胞（示例）：

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

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

Refer the Clicked element using $(this) when used in another function

html

javascript

jquery

javascript-events