参数在 $() 之外不起作用 - jQuery答案

【问题标题】：Parameter won't work outside of $() - jQuery参数在 $() 之外不起作用 - jQuery
【发布时间】：2016-06-23 20:24:56
【问题描述】：

我有一个简单的 AJAX 脚本，我很好奇为什么该参数在 $() 块之外不起作用：

var loadWork = function(el) { //element which href will be used
    var url = $(el).attr('href'); //it doesn't work if 'el' is not in $()
    $.get(url, function(data) {
        $('#work-gallery').html(data);
    });

}

$(document).ready(function() {
    loadWork('#work ul li a[href="includes/wdes.html"]')
    $('#work ul li a').click(function(evt) {
        evt.preventDefault();
        var element = $(this);
        loadWork(element);
    });
});

loadWork 函数的 el（元素的缩写）参数需要在 *var url = ...* 表达式中的 $() 内。为什么会这样，当我在函数调用中将它作为变量或文字元素传递时？

【问题讨论】：

因为它需要在 $() 中才能工作？为什么不想使用它？
因为el 是一个字符串。
您的问题实际上是 “为什么 DOM 元素的行为不像 jQuery 对象？” 答案是“因为它们不是。”
@RonenCypis 我怀疑你已经看到$(this) 通过element 传递给loadWork，并忽略了对loadWork 的第一次调用，它正在传递一个字符串，就像我做的那样从:)开始
@JamesThorpe 正确！

标签： javascript jquery frontend

【解决方案1】：

你想做什么：

“点击#work 中的链接时，将该链接的href 返回到#work-gallery 中。”

对于简单的内容加载作业，有 .load() jQuery function，它接受一个 URL 并将返回的 HTML 放入一个元素中——这正是您在 loadWork() 函数中所做的。所以让我们从头开始那个函数，它是多余的。

其次，您首先要加载一些内容。最简单的方法是在其中一个链接上触发 click 事件，因为我们已经有了正确的点击处理程序。

$(document).ready(function() {
    $('#work a').click(function (e) {
        e.preventDefault();
        $('#work-gallery').load(this.href);
    }).first().click();
});

注意事件处理程序中的this是如何指向DOM对象的，所以你可以直接使用this.href而不是绕道调用.attr('href')。

【讨论】：

【解决方案2】：

你传递的是一个字符串，所以如果你不使用$() 包装它，它只是一个字符串，所以类似于

'#work ul li a[href="includes/wdes.html"]'.attr('xyz')

但这是无稽之谈，因为 .attr 方法是 jqueryObjects 的一个属性，所以使用

$('#work ul li a[href="includes/wdes.html"]')

将选择匹配的 domnodes 并将它们包装为 jquery 对象，以便您可以运行 jquery 方法，如 .attr()

【讨论】：