我的前端至少在基础水平以上的旅程仍在继续,最近我偶然发现了一个很大的问题。
我可以选择 DOM 元素,例如
var element=document.getElementById("elementid")
然后添加一些功能,就像这样
function testFunction() {
alert(this.getAttribute('data-self'));
}
element.customFunction=testFunction;
但是有没有办法使用 jQuery 来做到这一点?
尝试过attr()
、prop()
、data()
,但在这方面没有任何运气。 data()
是一个接近的函数,因为它允许我使用 $('#my-element-id').data('customFunction')();
例如,但仍然不能解决我的问题,因为所选按钮的这个新属性无法通过任何其他方式访问。
总结一下:以像任何其他属性一样可访问的方式向 DOM 元素集合添加通用函数(如示例)的最简单方法是什么?
最佳答案
出于多种原因,直接向 DOM 元素添加函数并不被认为是一个好的做法。
我建议一个非常简单的 jQuery 插件方法:
jQuery.fn.myMethod = function() {
// iterate all items in the jQuery collection and apply any logic you want
return this.each(function() {
// `this` will be the DOM element so you can carry out your operation here
// for example, to flip a background color
if (this.tagName === "INPUT") {
this.style.backgroundColor = "red";
} else {
this.style.backgroundColor = "blue";
}
});
}
// usage of jQuery plugin method:
$("#elementid").myMethod();
$(".boxes, .ovals, .containers").myMethod();
您还可以将参数传递给 jQuery 插件方法,并在自定义方法的实现中使用这些参数。
关于javascript - 使用 jQuery 添加函数到 DOM 元素集?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35164742/