javascript - (jQuery) 使用 extend() 访问自定义属性时出现问题
问题描述
我已经为 jquery div 元素分配了一个名为 name 的自定义属性。我可以使用 div1.name 手动访问该属性,但我无法使用 $(this) 通过鼠标事件访问它。
var div1 = $('<div></div>');
div1.css("width", "100px");
div1.css("height", "100px");
div1.css("background-color", "red");
div1.mouseover(sayName);
$('body').append(div1);
var div2 = $('<div></div>');
div2.css("width", "100px");
div2.css("height", "100px");
div2.css("background-color", "green");
div2.mouseover(sayName);
$('body').append(div2);
div1.extend({"name":"Red"});
div2.extend({"name":"Green"});
function sayName() {
console.log(div1.name); // prints Red
console.log(div2.name); // prints Green
console.log($(this).name); // prints undefined
}
我需要一种使用 $(this) 访问名称的方法
解决方案
您尝试做的事情是不可能的,因为您将name
属性设置为特定jQuery
实例,而每次调用时都会创建一个新实例$(this)
,尽管它包含相同的 HTML 元素。
相反,您可以做的是使用 getter/setter 组合来获取/设置data-*
属性:
/* Expand jQuery.fn to have the 'name' property. */
Object.defineProperty($.fn, "name", {
get: function () {
/* Return the value of the first element's 'data-name' attribute. */
return this[0].dataset.name;
},
set: function (value) {
/* Iterate over every element in the context. */
for (var i = 0; i < this.length; i++) {
/* Set the value as the value of the element's 'data-name' attribute. */
this[i].dataset.name = value;
};
}
});
$(function () {
/* Set the 'name' property of the element (sets 'data-name'). */
$("#element").name = "Fancy Div";
/* Get the value of the 'name' property (gets 'data-name'). */
console.log($("#element").name);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "element"></div>
因为,通常,您更有可能希望以这种方式添加多个属性,所以这里有一个封装了此功能的快速插件:
/* Create a method that can set properties as described. */
$.fn.set = function (property, value) {
/* Create the object that will contain the given property/ies. */
var obj = (typeof property == "object") ? {...property || {}} : {[property]: value};
/* Iterate over every property in the given object. */
for (let property in obj) {
/* Check whether the property doesn't already exist. */
if (!(property in $.fn)) {
/* Expand jQuery.fn to have the 'name' property. */
Object.defineProperty($.fn, property, {
get: function () {
/* Return the value of the first element's data-* attribute. */
return this[0].dataset[property];
},
set: function (value) {
/* Set the value of every element's data-* attribute. */
this.each(index => this[index].dataset[property] = value);
}
});
}
/* Update the property with the new value. */
this[property] = obj[property];
}
/* Return the context. */
return this;
};
$(function () {
/* Set some properties of the element. */
$("#element")
.set("name", "Fancy Div")
.set({type: "container", value: 0});
/* Get some properties of the element. */
console.log("name: " + $("#element").name);
console.log("type: " + $("#element").type);
console.log("value: " + $("#element").value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "element"></div>
推荐阅读
- html - 机器人框架:如何从 div 标签创建列表
- winforms - 组件在编辑器中不可见,但在对象检查器中可见
- javascript - webpack 以与其他 js 文件相同的方式解析 node_modules
- typescript - 当包裹在 Observable 中时,类型“字符串”不能分配给类型字符串文字
- javascript - 为什么我不能更改 SQLite 中的值?
- python - 如何将python中的字符串重复到一定长度
- mysql - 合并两个表唯一列
- reactjs - axios发布请求后未设置状态数组
- javascript - React:根据 URL 渲染子数组中的重复元素
- javascript - jQuery .each(index, item) 默认不提供 jQuery 对象