Question

我的旅程至少在前端的基本水平上仍然存在，我最近偶然发现了一个很大的问题。

我可以选择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元素集合中的最简单方法是什么？它可以像任何其他属性一样访问？

Answer 1

由于各种原因，将函数直接添加到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插件方法，并在自定义方法的实现中使用这些参数。

Answer 2

非常相似。 jQuery只返回一个对象，因此您可以向其添加函数。

＆＃13;

var myElement = $('#elementid');
function testFunction() {
    alert($(this).attr('data-self'));
}
myElement.customFunction=testFunction;

myElement.customFunction();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elementid" data-self="some value"></div>

＆＃13;

使用jQuery为DOM元素集添加函数？

2 个答案: