Question

我遇到了一些我试图简化的问题。单击链接时，我希望通过jQuery更新其CSS。我的主要问题是，如何将Javascript的this对象转换为jQuery对象以便于处理？

以下是我的代码：

<!-- HTML -->
<a href="javascript:load('page.php', this);">load some page</a>
<a href="javascript:load('other.php', this);">load other page</a>

// JS
function load(url, linkObj) {
    loadPageWithURL(url);
    $(linkObj).css('text-decoration', 'underline');
}

然而，这不起作用。显然，当选择一个链接时，我做的不仅仅是下划线，但你明白了。我使用this错了还是只是将原始JS对象转换为jQuery识别的对象？

Answer 1

该功能可以正常工作（$(linkObj)是正确的），但您的脚本位于href而不是onclick属性。所以它永远不会执行。

变化：

<a href="load('page.php', this);">load some page</a>
<a href="load('other.php', this);">load other page</a>

要：

<a href="#" onclick="load('page.php', this); return false;">load some page</a>
<a href="#" onclick="load('other.php', this); return false;">load other page</a>

Answer 2

不要使用内联事件！使用jQuery绑定它们。

<a class="load" href="page.php">load some page</a>
<a class="load" href="other.php">load other page</a>

然后在JavaScript中

$(function(){
    $('.load').click(function(e){
        e.preventDefault();

        loadPageWithURL(this.href);
        $(this).css('text-decoration', 'underline');
    });
});

更新：如果在加载页面后添加了新链接，则需要使用：

$(function(){
    $(document).on('click', '.load', function(e){
        e.preventDefault();

        loadPageWithURL(this.href);
        $(this).css('text-decoration', 'underline');
    });
});

Answer 3

使用jQuery的一个优点是您可以轻松编写 unobtrusive JavaScript ，这意味着您不需要将HTML与JavaScript混合使用。您可以通过如下重构代码来改进并实现您的要求。

HTML：

<a href="page.php">load some page</a>
<a href="other.php">load other page</a>

您的JavaScript代码在一个地方：

jQuery(function($) {
  $(document).on('click', 'a', function() {
    var $link = $(this);
    load($link.attr('href'), $link);
    return false;
  });
});

注意：前面的代码将捕获所有链接，如果您不想这样做，可以添加特定的类名。假设类名为load，则应按如下方式重写代码：

HTML：

<a class="load" href="page.php">load some page</a>
<a class="load" href="other.php">load other page</a>

你的JavaScript：

jQuery(function($) {
  $(document).on('click', '.load', function() {
    var $link = $(this);
    load($link.attr('href'), $link);
    return false;
  });
});

如果您对提供的代码有任何特殊关联，请将其放在评论中。

如何通过锚链接传递`this`对象并将其转换为jQuery对象？

3 个答案: