Question

如何使用＆＃39; $（this）＆＃39;来引用点击的元素？当＆＃39; $（this）＆＃39;用于在click方法之外或在click方法之外的其他位置创建的函数。。以下是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

<强>错误/建议：

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

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

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

$(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');
}

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

如何在此处引用点击为$（this）

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

demo

Answer 4

您可以绑定到<?php $string_message="what is meant by server_protocal"; $_SERVER['SERVER_PROTOCOL'] ? print "$string_message<br />" : print "$string_message\n"; ?>元素的click事件，如果它不存在，该函数将永远不会触发：

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"});
};

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

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

在另一个函数中使用时，使用$（this）引用Clicked元素

4 个答案: