Question

如果在jquery中的on click方法中传递了一个参数，我试图对单击的元素执行特定操作。当我试图访问＆＃34;这个＆＃34;它引用整个窗口而不是单击的元素。我如何访问处理程序中的clicked元素？

以下是我使用的代码：

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上设置了一个示例。任何帮助将不胜感激。

Answer 1

您可以使用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);

Answer 2

这是指函数所属的对象，在你的情况下，函数属于window对象或全局对象，＆＃39; this＆＃39;关键字的行为会有所不同，具体取决于您使用函数的方式，例如，如果您将它用作构造函数（使用new关键字）＆＃39; this＆＃39;将被绑定到正在构造的新对象，并且当该函数用作事件处理程序时，这将被设置为事件触发的元素的事件。有关详细信息，请参阅：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/

Answer 3

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

JQUERY WAY：

在您的jquery点击事件处理程序中，您拥有event对象。它有一个名为target的属性，这是你正在寻找的。

更改此内容：$this.addClass("one");

对此：$(event.target).addClass("one");

您也可以执行此操作：event.target.className = "one"

显然也为“两个”做...

VANILLA WAY：

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

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

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

3 个答案: