jQuery 父级更改内部 HTML

发布于 2024-09-25 07:42:31 字数 1000 浏览 6 评论 0原文

到目前为止我得到了这个：

$('.event-tools a').click(function() 
{
    var status = $(this).attr('id');
    var id = $(this).parent().attr('id');

    $.ajax({
        type: "GET",
        url: "http://localhost:8888/update/test.php",
        data: "rsvp=" + status + '&id=' + id,
        success: function()
        {
            $(this).parent().html(status);
            //alert(status);
        },
        error: function()
        {
            alert('failz');
        }
    });
});

这样：

<span class="rsvp" id="1">
    <a href="#" class="rsvp" id="Attending">Attending</a>
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a>
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a>
</span>

当我单击其中一个并使用 alert() 时，它会通过提示警报框来工作，但是，当我使用 $(this) 时.parent().html(status); 在 success: 事件上，它不会使用 status 更改 HTML...

原文

I got this so far:

$('.event-tools a').click(function() 
{
    var status = $(this).attr('id');
    var id = $(this).parent().attr('id');

    $.ajax({
        type: "GET",
        url: "http://localhost:8888/update/test.php",
        data: "rsvp=" + status + '&id=' + id,
        success: function()
        {
            $(this).parent().html(status);
            //alert(status);
        },
        error: function()
        {
            alert('failz');
        }
    });
});

With this:

<span class="rsvp" id="1">
    <a href="#" class="rsvp" id="Attending">Attending</a>
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a>
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a>
</span>

When I click on one of them and use the alert() it works by prompting the alert box, however, when I use the $(this).parent().html(status); on the success: event, it doesn't change the HTML with the status...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心的憧憬 2024-10-02 07:42:31

success 函数内部的 this 与外部的作用域不同，因为 JavaScript 具有函数作用域。您需要执行类似的操作来保留外部函数的 this 的原始值：

var self = this;
$.ajax({
    // ...
    success: function() {
        $(self).parent().html(status);
    }
});

或者，您可以使用 jQuery 的 .proxy()-方法：

$.ajax({
    // ...
    success: $.proxy(function() {
        $(this).parent().html(status);
    }, this)
});

this inside your success-function does not have the same scope as outside of it, since JavaScript has function scope. You need to do something like this to preserve the original value of the outer function's this:

var self = this;
$.ajax({
    // ...
    success: function() {
        $(self).parent().html(status);
    }
});

Alternatively, you could use jQuery's .proxy()-method:

$.ajax({
    // ...
    success: $.proxy(function() {
        $(this).parent().html(status);
    }, this)
});

回复收藏 0 原文

眼眸印温柔 2024-10-02 07:42:31

试试这个

JS:

$('.event-tools a').click(function(ev) 
{
    ev.stopPropagation()

    var status = $(this).attr('id'),
        id = $(this).parent().attr('id'),
        myparent = $(this).parent();

    $.ajax({
        type: "GET",
        url: "http://localhost:8888/update/test.php",
        data: "rsvp=" + status + '&id=' + id,
        success: function()
        {
            $(myparent).parent().html(status);
            //alert(status);
        },
        error: function()
        {
            alert('failz');
        }
    });
    return false;
});

HTML:

<span class="event-tools" id="1"><!-- this has class = "rsvp" -->
    <a href="#" class="rsvp" id="Attending">Attending</a>
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a>
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a>
</span>

try this

JS:

$('.event-tools a').click(function(ev) 
{
    ev.stopPropagation()

    var status = $(this).attr('id'),
        id = $(this).parent().attr('id'),
        myparent = $(this).parent();

    $.ajax({
        type: "GET",
        url: "http://localhost:8888/update/test.php",
        data: "rsvp=" + status + '&id=' + id,
        success: function()
        {
            $(myparent).parent().html(status);
            //alert(status);
        },
        error: function()
        {
            alert('failz');
        }
    });
    return false;
});

HTML:

<span class="event-tools" id="1"><!-- this has class = "rsvp" -->
    <a href="#" class="rsvp" id="Attending">Attending</a>
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a>
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a>
</span>

回复收藏 0 原文

~没有更多了~