gpt4 book ai didi

Javascript:链接元素,如 jQuery

转载 作者:行者123 更新时间:2023-11-29 18:57:48 25 4
gpt4 key购买 nike

我正在尝试在一定程度上复制 jQuery 的元素操作。现在我发现非常有用的是 .first() 选择器。我希望能够像这样链接函数;
getElement(selector).first().hasClass(className);

现在,我的进展有两个问题(请注意,我的代码示例已最小化,所以请不要评论错误处理。)

var getElement = function(selector, parent) {
ret = document.querySelectorAll(selector);
this.element = ret;
this.hasClass = function(className) {
className.replace('.', '');
if(this.multiple())
{
console.log('Cannot use hasClass function on multiple elements');
return false;
}
};

this.first = function() {
this.element = this.element[0];
return this;
};
return this;
};

我目前的问题

如果我调用我的函数;

var $test = getElement('.something');
//result: nodelist with .something div

如果我调用结果中的第一个元素;

$test.first();
//结果:第一个div,完美!

但是,现在如果我再次调用 $test,它会将 elements 属性替换为 first() 的结果,这意味着我“失去”了我的旧值(value)观。我不想丢失它们,我只想要用于该特定功能的 first() 函数。然后我希望 $test 再次返回所有元素。此外,调用 first() 现在将以 undefined 结束,因为 this 中只剩下 1 个元素,因为它已从中删除了旧元素在对象内。

另一种尝试

现在,我还尝试通过返回第一个子对象而不是整个类对象来稍微扭转一下局面;

this.first = function() {
return this.element[0];
};

不过,我会$test.first().hasClass(类名);
//返回错误,方法 hasClass undefined

这是因为 .hasClass 存在于原始 this 上,因为我现在返回该元素,所以它不再返回。

我试图从 jQuery 的库中获取一些东西,尽管这让我更加困惑......

我已经用谷歌搜索了这个主题,但是对于我发现的所有“链接方法”解决方案,它们似乎都覆盖了对象的原始值,这不是我想要发生的。另一种解决方案实际上需要我一遍又一遍地重新启动对象,这对我来说似乎效率不高......感谢任何帮助。我假设我正在以完全错误的方式解决这个问题。

-- 如果您能帮助我,请解释您的解决方案为何有效。我真的觉得如果我理解了这一点,我对 javascript 的理解可以进一步扩展。我只需要解决这个结构性(?)问题。

最佳答案

first() 这样的方法不应该修改this,它应该创建一个新对象并返回它。您只能在修改元素的方法中使用 return this;,而不是返回从元素派生的信息。

this.first = function() {
return new getElement(this.element[0]);
};

请注意,您必须使用 new getElement 来创建对象,而不仅仅是 getElement

这还需要对构造函数进行更改,因此它可以接受选择器字符串或元素:

var getElement = function(selector, parent) {
var ret = typeof selector == "string" ? document.querySelectorAll(selector) : [selector];
...
}

您还应该考虑以适当的 OO 方式执行此操作,将方法放在原型(prototype)中,而不是在每个对象中定义它们。

var getElement = function(selector, parent) {
var ret = typeof selector == "string" ? document.querySelectorAll(selector) : [selector];
this.element = ret;
};

getElement.prototype.hasClass = function(className) {
className.replace('.', '');
if (this.multiple()) {
console.log('Cannot use hasClass function on multiple elements');
return false;
}
};

getElement.prototype.first = function() {
return new getElement(this.element[0])
};

关于Javascript:链接元素,如 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48432698/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com