0

我有一个具有相同类和动态 ID 的按钮列表。当用户单击按钮时，我希望该按钮的文本更改为“已添加”。该功能的其余部分工作正常，但成功的结果根本没有改变。在我获得成功结果之前：

$('.addalbum').text('Added');

但它将列表上的每个按钮都更改为添加。我只希望更改所选项目旁边的按钮。我正在尝试访问选择器中按钮的 id，但到目前为止还没有骰子。

jQuery

$('.addalbum').click(function() {

        var album_id = $('.addalbum').attr('id');

        $.ajax({
                    url: '/album/addAlbumToList',
                    type: 'POST',
                    data: data-is-here,
                    success: function (result) {
                        $('.addalbum' + album_id).text('Added');                    
                    }
                });
        e.preventDefault();
});

HTML/PHP

<button class="addalbum" id="add<?php echo $a->album_id; ?>">Add album</button>
so the IDs are #add123, #add124, etc.
4

5 回答 5

3

在点击处理程序中，您可以使用 来引用项目本身$(this)，所以不要这样：

var album_id = $('.addalbum').attr('id');

你会这样写：

var album_id = $(this).attr('id');

您也可以为它创建一个变量，因为您在几个地方使用它：

var $album = $(this),
album_id = $album.attr('id');

// success handler
$album.text('Added');

我在这里使用 $album 来表示它是一个 jQuery 集合

于 2012-11-23T14:58:24.090 回答
1

您需要$(this).attr('id')而不是$('.addalbum')在 ajax 调用之前保存。

$('.addalbum').click(function() {

        var album = $(this);

        $.ajax({
                    url: '/album/addAlbumToList',
                    type: 'POST',
                    data: data-is-here,
                    success: function (result) {
                        album.text('Added');                    
                    }
                });
        e.preventDefault();
});
于 2012-11-23T14:58:59.303 回答
0

您可以使用this来引用单击的按钮。 

$('.addalbum').click(function() {
    var button = $(this);
    $.ajax({
        url: '/album/addAlbumToList',
        type: 'POST',
        data: data-is-here,
        success: function (result) {
            button.text('Added');                    
        }
    });
    e.preventDefault();
});
于 2012-11-23T14:59:14.170 回答
0

如果 ID 是唯一的，为什么不

$('#' + album_id).text('Added');

或更好

$('.addalbum').click(function() {

        var thisbutton = $(this);

        $.ajax({
                    url: '/album/addAlbumToList',
                    type: 'POST',
                    data: data-is-here,
                    success: function (result) {
                        thisbutton.text('Added');                    
                    }
                });
        e.preventDefault();
});
于 2012-11-23T14:59:40.893 回答
0

我想你已经糊涂了。您正在将album_id 添加到.addalbum，但是addalbum 类没有动态ID，就像您在该字段中一样id="add<?php echo $a->album_id; ?>" 可能这就是您没有得到它的原因。

于 2012-11-23T15:01:18.320 回答