1

我在尝试简化的事情上遇到了麻烦。单击链接时，我希望通过 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');
}

但是，这不起作用。Obviously I'm doing more than an underline when a link is selected, but you get the idea. 我使用this错了还是只是将原始 JS 对象转换为 jQuery 识别的对象？

4

3 回答 3

7

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

改变：

<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>
于 2013-07-16T20:34:20.183 回答
6

不要使用内联事件！使用 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');
    });
});
于 2013-07-16T20:38:51.490 回答
4

使用 jQuery 的优点之一是您可以轻松编写不显眼的 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;
  });
});

如果您对提供的代码有任何特别的要求，请将其放在评论中。

于 2013-07-16T20:38:26.477 回答