如何找到在 jquery 处理程序中单击的元素?

How can I find the element clicked on inside a jquery handler?

如果在 jquery 中的单击方法中传递参数,我将尝试对单击的元素执行特定操作。当我尝试访问 "this" 时,它引用的是整个 window 而不是单击的元素。我将如何访问处理程序中单击的元素?

这是我使用的代码:

var myfunction = function(action) {
  var content;
  var $this = $(this);
if(action === "one") {
  $(".output").text("clicked on one");
  $this.addClass("one");
 } 
if(action === "two") {
 $(".output").text("clicked on two");
 $this.addClass("two");
  }
};
$("#button").on("click", function(event) {
 myfunction("one");
});

$("#button2").on("click", function(event) {
  myfunction("two");
});

我在 jsbin here 上设置了一个示例。任何帮助将不胜感激。

您可以使用 Function.prototype.call:

$("#button2").on("click", function(event) {
  myfunction.call(this, "two");
});

或者将操作存储为元素上的属性,直接绑定处理程序并查询属性。

var myfunction = function() {
    var content;
    var $this = $(this);
    var action = $this.attr('data-action');
    if (action === "one") {
        $(".output").text("clicked on one");
        $this.addClass("one");
    } else if (action === "two") {
        $(".output").text("clicked on two");
        $this.addClass("two");
    }
};
$("#button2").on("click", myfunction);

this 指的是函数所属的对象,在您的情况下,函数属于 window 对象或全局对象,'this' 关键字的行为因您使用函数的方式而异,例如,如果您将它用作构造函数(使用 new 关键字),'this' 将绑定到正在构造的新对象,并且当该函数用作事件处理程序时,this 将被设置为事件元素事件被解雇。 有关更多信息,请参阅:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

您需要更改代码并执行如下操作:

$(".button").on("click",function(){
   var $this = $(this) //refers to the event it was fired from (button object)
$(".output").text("You clicked on "+$this.text());      
});

我使用 类 而不是 id 来定位任何被点击的按钮

jsfiddle 中的示例:http://jsfiddle.net/fvacbd9u/

有几种方法可以做到这一点。

JQUERY 方式:

在您的 jquery 单击事件处理程序中,您有 event 对象。它有一个名为 target 的 属性,这就是您要查找的内容。

改变这个:$this.addClass("one");

为此:$(event.target).addClass("one");

您也可以这样做:event.target.className = "one"

显然也为 "two" 做...

香草方式:

您可以只传递一个额外的参数来表示您点击的元素。

var myfunction = function(action, element) {
  var content;
if(action === "one") {
  $(".output").text("clicked on one");
  $(element).addClass("one");
  // or event.target.className = "one"
 } 
if(action === "two") {
 $(".output").text("clicked on two");
 $(element).addClass("two");
 // or event.target.className = "two"
  }
};
$("#button").on("click", function(event) {
 myfunction("one", this);
});

$("#button2").on("click", function(event) {
  myfunction("two", this);
});