首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在js回调脚本中确定/使用$(this)

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

Stack Overflow用户
提问于 2010-02-04 06:09:41
回答 4查看 395关注 0票数 0

我使用Rails和jQuery,通过单击链接进行ajax调用。我将我的application.js文件设置为与建议的这里文件类似的文件,它工作得很好。我遇到的问题是如何在我的话中使用$(这个)。update.js.erb文件来表示我单击的链接?我不想给每个人分配一个ID,然后在回调脚本中重新编译这个id。

编辑,给出一个类似于我试图做的事情的简单示例(并且更容易解释):如果用户单击链接,从列表中删除该元素,控制器将处理回调,回调(这里有问题)将删除我单击的元素,因此回调delete.js.erb只需使用$( This ).fadeOut();这就是为什么我希望使用$(this),这样我就不必为每个元素分配ID (这将是世界末日,只是更详细的标记)。

application.js

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
<%= link_to 'Link Title', article_path(a, :sentiment => Article::Sentiment['Neutral']), :class => 'put' %>

这两件事的组合将在rails中调用update.js.erb,该文件中的代码将用作ajax的回调(在本例中为$.put)。

update.js.erb

代码语言:javascript
运行
复制
// user feedback
$("#notice").html('<%= flash[:notice] %>');

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

回答 4

Stack Overflow用户

回答已采纳

发布于 2010-04-21 15:40:50

这是不可能实现的,我试图这样做的方法使得不可能,我不能通过视图传递对javascript对象的引用。

解决方案是为每个项目分配ID,并按此引用它们。

票数 0
EN

Stack Overflow用户

发布于 2010-02-19 03:44:16

jQuery已经用事件属性为您处理了this问题:

代码语言:javascript
运行
复制
$("a").click(function(e){
  e.preventDefault();
  $("#foo").fadeIn(3000, function(){
    $(e.target).text("Foo loaded");
  });
});​​​

请注意,我如何通过它的event返回主链接。在内部处理的任何事件都是这样的。只需给它们一个独特的名称,如e2e3等。不再需要不断地编写另一条var item = $(this)行来跟踪this三个事件。

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

票数 1
EN

Stack Overflow用户

发布于 2010-02-04 07:12:09

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

基本上,我对需要操作的每个DOM元素都有一个id,并在脚本中引用它们。它偶尔是丑陋的,但另一个选择则更糟糕。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2197685

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档