javascript - 成功更改ajax函数上单击按钮的类

Question

我有几个 html 按钮(不在表单内)。

单击时，它们调用一个 JavaScript 函数，该函数在确认后运行一个 ajax 调用。这部分一切正常，但我想更改在 ajax 调用成功时单击的任何按钮的类。

我已经尝试了在 stackOverflow 上看到的各种方法，但它们似乎都不起作用...请问我做错了什么吗？

这是简化的 HTML(按钮)

<button class="btn btn-primary" onclick="primaryImage(4107,19372,'/abbie1.jpg'); return false;">
set as profile image
</button>

<button class="btn btn-primary" onclick="primaryImage(4107,19373,'/abbie2.jpg'); return false;">
set as profile image
</button>

<button class="btn btn-success" onclick="primaryImage(4107,19374,'/abbie3.jpg'); return false;" disabled="disabled">
profile image
</button>

请注意:最后一个按钮已经是激活/成功按钮，我也想删除成功类(因为只有一个应该激活)，但这也许是我的下一个阶段....

这里是 javaScript，(我已经在我尝试过的一些方法中留下了，但是把它们注释掉了)

function primaryImage(eid,pid)
    {
        if (confirm("Are you sure you wish to use this as your profile image?"))
        {

            $.ajax({
                type: "POST",
                async: false,
                cache: false,
                dataType: "json",
                url: "ajax_photo.php",
                data: "action=primary&eid="+eid+"&pid="+pid,
                //context: this,
                success: function(data){
                    if(data.result=='success')
                    {
                        alert('The image is now set as the profile image');
                        //$('button').click(function(){
                        //   $(this).addClass('btn-success');
                        //});

                        //$('button').on(data.result=='success', function(e) {
                        //  $(this).toggleClass("btn btn-success"); //you can list several class names 
                        //  e.preventDefault();
                        //});

                        //$(this).removeClass('btn-primary').addClass('btn-success');

                    }
                    else
                    {
                        alert('An error occurred when trying to set the image: ' + data.result);
                    }
               }
            });
        }
    }

对于我做错了什么的任何建议，我将不胜感激(如你所见，我对 JS 还不是很好)

谢谢!福特汽车

Answer 1

正如您在注释掉的代码中所指出的，您在点击事件已经被激发之后绑定(bind)了点击事件。

我建议您传递在 primaryImage() 函数本身中单击的按钮的引用:

 <!-- In your HTML -->
 <button class="btn btn-success" onclick="primaryImage(this, 4107,19374,'/abbie3.jpg'); return false;" disabled="disabled">
profile image
</button>

---

 function primaryImage(button, eid,pid){
  /** ... */

然后使用该引用的按钮，您可以向元素以及元素的 siblings 添加或删除 CSS 类(使用 jQuery 的 siblings() 方法) .

            //your ajax call
            success: function(data){
                if(data.result=='success') //make sure this really is success
                {
                    alert('The image is now set as the profile image');
                    $(button).removeClass('btn-primary').addClass('btn-success');
                    $(button).siblings('button').removeClass('btn-success').addClass('btn-primary');
                }
          }