如果'这'in函数是一个特殊的类

If 'this' in function is a particular class

本文关键字：一个 in 函数 如果      更新时间：2023-09-26

我有一个委托，当使用某些DOM元素的id或类点击它们时，它会被调用，并且我在函数中使用"this"，但我该如何找出"this"实际上是哪个类或id？

这是我的代码：

$(document).delegate("#lg-menu li, #xs-menu li, .list-item", "click", function(e) { 
    a = $(this).attr("alpha");
    b = $(this).attr("bravo");
    c = $(this).attr("charlie");
    d = parseInt($(this).attr("delta"));
}

this是指触发事件的DOM对象，因此您可以使用DOM方法或jQuery方法来检查它或它的父对象：

$(document).delegate("#lg-menu li, #xs-menu li, .list-item", "click", function(e) { 
    var item = $(this);
    // see which selector the item matches
    if (item.is("#lg-menu li") {
        // must be #lg-menu li
    } else if (item.is("#xs-menu li") {
        // must be #xs-menu li
    } else {
        // must be .list-item
    }
}

.is()为您完成了整个选择器评估。您还可以询问元素的各个属性，例如：

item.hasClass(".list-item")               // does the item have a .list-item classname
item.parents("#lg-menu").length !== 0     // does the item have a #lg-menu parent
item.parents("#xs-menu").length !== 0     // does the item have a #xs-menu parent
this.tagName === "LI"                     // is the item an <li> tag

不过，如果你真的需要知道它是哪个项目，那么你可能只需要为每个项目使用单独的事件处理程序，并省去每次试图弄清楚它是哪个的工作。

$(document).delegate("#lg-menu li", "click", function(e) { 
    // code here
});
$(document).delegate("#xs-menu li", "click", function(e) { 
    // code here
});
$(document).delegate(".list-item", "click", function(e) { 
    // code here
});

要获得这个的id，可以读取像这样的dom元素的id属性

var id = this.id;

要检查它是否有特定的类，请使用类似的.hasClass（）

var hasActive = $(this).hasClass('active')

您可以记录您的this对象并找出它包含的字段：

$(document).delegate("#lg-menu li, #xs-menu li, .list-item", "click", function(e) { 
   console.log(this);
   ...
}

也可以使用bind(thisArg)方法为函数手动设置this此处描述

相关文章：