如何在 js 回调脚本中确定/使用 $(this)

Question

我正在使用 Rails 和 jQuery，通过单击链接发起 ajax 调用。我将我的 application.js 文件设置为看起来像建议的here 并且效果很好。我遇到的问题是如何在我的 say..update.js.erb 文件中使用 $(this) 来表示我点击的链接？我不想给每个人分配一个ID，然后在回调脚本中重新编译那个ID..

编辑 举一个类似于我正在尝试做的事情的简单示例（并且更容易解释）：如果用户单击链接，从列表中删除该元素，控制器将处理回调，并且回调（这里有问题）会删除我点击的元素，所以在回调中 delete.js.erb 只会说 $(this).fadeOut();这就是为什么我想使用 $(this) 这样我就不必为每个元素分配一个 ID（这将是世界末日，只是更详细的标记）

application.js

jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript,application/javascript,text/html")} })

function _ajax_request(url, data, callback, type, method) {
    if (jQuery.isFunction(data)) {
        callback = data;
        data = {};
    }
    return jQuery.ajax({
        type: method,
        url: url,
        data: data,
        success: callback,
        dataType: type
    });
}

jQuery.extend({
    put: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'PUT');
    },
    delete_: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'DELETE');
    }
});

jQuery.fn.submitWithAjax = function() {
    this.unbind('submit', false);
    this.submit(function() {
        $.post(this.action, $(this).serialize(), null, "script");
        return false;
    })
    return this;
};

// Send data via get if <acronym title="JavaScript">JS</acronym> enabled
jQuery.fn.getWithAjax = function() {
    this.unbind('click', false);
    this.click(function() {
        $.get($(this).attr("href"), $(this).serialize(), null, "script");
        return false;
    })
    return this;
};

// Send data via Post if <acronym title="JavaScript">JS</acronym> enabled
jQuery.fn.postWithAjax = function() {
    this.unbind('click', false);
    this.click(function() {
        $.post($(this).attr("href"), $(this).serialize(), null, "script");
        return false;
    })
    return this;
};

jQuery.fn.putWithAjax = function() {
    this.unbind('click', false);
    this.click(function() {
        $.put($(this).attr("href"), $(this).serialize(), null, "script");
        return false;
    })
    return this;
};

jQuery.fn.deleteWithAjax = function() {
    this.removeAttr('onclick');
    this.unbind('click', false);
    this.click(function() {
        $.delete_($(this).attr("href"), $(this).serialize(), null, "script");
        return false;
    })
    return this;
};

// This will "ajaxify" the links
function ajaxLinks(){
    $('.ajaxForm').submitWithAjax();
    $('a.get').getWithAjax();
    $('a.post').postWithAjax();
    $('a.put').putWithAjax();
    $('a.delete').deleteWithAjax();
}

show.html.erb

<%= link_to 'Link Title', article_path(a, :sentiment => Article::Sentiment['Neutral']), :class => 'put' %>

两者结合会在rails中调用update.js.erb，该文件中的代码用作ajax的回调（本例中为$.put）

update.js.erb

// user feedback
$("#notice").html('<%= flash[:notice] %>');

// update the background color
$(this OR e.target).attr("color", "red");

Answer 1

jQuery 已经通过事件属性为您处理了this 问题：

$("a").click(function(e){
  e.preventDefault();
  $("#foo").fadeIn(3000, function(){
    $(e.target).text("Foo loaded");
  });
});​​​

请注意我如何通过其event 引用主链接。对于在其中处理的任何事件也是如此。只需给它们唯一的名称，例如e2、e3 等。不再需要不断地编写另一个var item = $(this) 行来跟踪this 三个事件。

在线演示：http://jsbin.com/egelu3/edit

Answer 2

如果您的 JS 来自服务器，那么 $(this) 确实无法在相同的上下文中运行。最接近的方法是从服务器加载一些脚本并在客户端函数的上下文中对其进行评估。

基本上，我需要操作的每个 DOM 元素都有一个 id，并在我的脚本中引用它们。它有时很丑陋，但替代品更糟。

Answer 3

如果你的 JS 来自服务器， 真的没有办法 $(this) 可以在相同的上下文中运行。这 你能得到的最接近的是加载 来自服务器的一些脚本和 eval 它在您的客户端的上下文中 函数。

不正确

我基本上每个都有一个 id 我需要操作的 DOM 元素，以及 在我的脚本中引用它们。它是 偶尔丑，但是 替代品更糟糕。

我不认为这很丑。

这个问题的关键是功能范围。让我告诉你我的意思。您需要创建一个在发送 XHR 调用之前调用的函数。在您的情况下，您是通过点击事件来完成的，所以让我向您展示一个为您量身定制的示例：

$( '#somelink' ).click( function( )
{
    // this stores the location of the current "this" value
    // into this function, and will available even after we
    // end this function (and will still live while the XHR's
    // callback is being executed

    var theLink = this;

    // fire the AJAX call

    $.post
    (
        'some/url',

        { 'some':'data' }, // optional

        function( )
        {
            // use theLink however you want
            // it'll still be there

            // also, if you're sending in callbacks
            // as variables, you can safely say

            hideAndStore.call( theLink, data );

            // which executes callback( ), overriding
            // "this" with theLink (your DOM node)
            // and sending in the responseText as the
            // first argument
        }
    );
} );

然后你可以让你的回调类似于：

function hideAndStore( response )
{
    // you can safely use "this" as the DOM node
    $( this ).css( { 'display':'none' } );

    // and you can do whatever you wish with the response
    window.globalData = response;
}

你可以让它做你真正想让它做的任何事情，哈哈。

有关更改“this”值的 JavaScript 函数的更多信息，请查看 MDC 的 .apply 和 .call

https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/Function/Applyhttps://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/Function/Call

Answer 4

您在发回的 javascript 中做了什么？也许你可以发回一些 html 或 json 并在回调中对其进行操作。

$('a:clickable').bind('click', function() {
  var elem = $(this);
  $.ajax({
    url: ...,
    dataType: 'json',
    success: function(data) {
      // elem is still in scope
      elem.addClass(data.class_to_add_to_link);
    }
  });
});

Answer 5

这是无法实现的，我尝试执行此操作的方法使其不可能，我无法通过视图传递对 javascript 对象的引用。

解决方案是为每个项目分配 ID，然后引用它们。