Question

我有一个具有相同类和动态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.

Answer 1

在点击处理程序中，您可以使用$(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集合

Answer 2

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

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

        var album = $(this);

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

Answer 3

您可以使用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();
});

Answer 4

如果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();
});

Answer 5

我认为你很困惑。您将album_id添加到.addalbum，但是类addalbum没有动态ID，就像您在字段id="add<?php echo $a->album_id; ?>"中一样可能这就是为什么你没有得到它。

具有相同类和动态ID的按钮的jquery选择器

5 个答案: