Question

我试图根据ajax帖子的结果更改单击按钮的类和文本。该页面有许多按钮，没有任何ID（虽然我可以添加它们，如果它确实需要）。我有以下javascript：

$('.ph-button').click(function () {
    var selected = [];
    $(this).closest('tr').each(function () {
        $(this).find('td').each(function() {
            selected.push($(this).html));                                    
        })
    })

    console.log(selected);

    $.ajax({
        type: "POST",
        url: "/ClassSearch/watchClasses",
        data: { arrayOfClasses: selected },            
        traditional: true,
        success: function (data) {
            //need the if statements here I think
            console.log(data);                                        
        }
    });
});

它起作用并给我一个0或1作为data。如果class='ph-button ph-btn-blue为0，我需要将课程更改为Watched，将文本更改为data，如果数据为class='ph-button ph-btn-grey，则将课程更改为Watch是1。

我尝试使用$(".ph-button").toggleClass("ph-button ph-btn-blue");，但它改变了页面上所有按钮的类，并没有像我需要的那样做。

我猜测toggleClass并不是我需要的东西，而且我不确定如何解决被点击的按钮而不是所有按钮。以下是两个可能的按钮：

<td><button class='ph-button ph-btn-blue'>Watched</button></td>
<td><button class='ph-button ph-btn-grey'>Watch</button></td>

解决方案：

$('.ph-button').click(function () {
    var selected = [];
    var btn = $(this);
    $(this).closest('tr').each(function () {
        $(this).find('td').each(function(){
            selected.push($(this).html());                                    
        })
    })
    console.log(selected);    
            $.ajax({
                type: "POST",
                url: "/ClassSearch/watchClasses",
                data: { arrayOfClasses: selected },            
                traditional: true,
                success: function (data) {
                    console.log(data);
                    if (data == 1) {
                        btn.toggleClass("ph-btn-grey ph-btn-blue").text('Watched');
                    }
                    if (data == 0) {
                        btn.toggleClass("ph-btn-blue ph-btn-grey").text('Watch');
                    }
                }
        });

   });

Answer 1

设置一个引用该按钮的临时变量，以便稍后在AJAX success回调中使用它：

$('.ph-button').click(function () {
    var selected = [];
    var btn = $(this);
    $(this).closest('tr').each(function () {
        $(this).find('td').each(function(){
            selected.push($(this).html());                                    
        })
    })
    $.ajax({
        type: "POST",
        url: "/ClassSearch/watchClasses",
        data: { arrayOfClasses: selected },            
        traditional: true,
        success: function (data) {
            if(data == "0"){
                btn.toggleClass("ph-button ph-btn-blue").text('Watched');
            }
        }
    });
});

根据发布结果更改按钮的类和文本

1 个答案: