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>

请注意：最后一个按钮已经是活动/成功按钮，我也希望在成功时删除该课程（因为只有一个应该是活动的），但这可能是我的下一个阶段.... < / p>

这里是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

由于您没有使用jQuery .click（）事件，我认为您需要传递函数args中的按钮。

所以你的按钮看起来像

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

然后你的功能就像

function primaryImage(el, 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: "http://anzvirtuel.org",
            data: "action=primary&eid="+eid+"&pid="+pid,
            //context: this,
            success: function(data){
                if(data.result=='success')
                {
                    $(el).addClass('btn-success');

                    alert('The image is now set as the profile image');

                    // keep doing whatever you want...
                }
                else
                {
                    alert('An error occurred when trying to set the image: ' + data.result);
                }
           }
        });
    }
}

由于我还没有完全理解你评论过的JS，我会让你输入你想要的代码，只需记住你的按钮可以在$(el)的jQuery中访问。

希望它可以帮到你

Answer 2

您应该将点击的元素传递给primaryImage（）函数，并在成功时使用它来做任何您喜欢的事情。

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

在你的JS中

function primaryImage(element, eid,pid)
{
    [...]
         success: function(data){
             if(data.result=='success')
             {
                 $(element).addClass('btn-success');
             }
             else
             {
                 alert('An error occurred when trying to set the image: ' + data.result);
             }
         }
    [...]
}

Answer 3

如您已注释掉的代码中所述，您在点击事件已被解雇后绑定点击事件。

我建议您传递一个引用按钮，该按钮已在primaryImage()函数本身中单击：

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

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

然后使用该引用按钮，您可以向元素添加或删除CSS类，以及元素的兄弟（使用jQuery＆＃39; s 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'); } }

Answer 4

您可以使用data-*属性而不是onclick（MDN Documentation），然后通过jQuery访问这些属性，这样您的代码就会更干净，HTML / JS就会分开。

试试这段代码，我为你的参数创建了三个data属性（data-eid，data-pid和data-image），并且还替换了你的JS来制作整个东西使用那些data属性。可以使用以下jQuery代码访问这些属性 - var eid = $(this).attr('data-eid');作为示例

这行代码会从单击的按钮中删除btn-primary类，向其中添加btn-success类并禁用它，因此无法再次切换。

pushedBtn.removeClass("btn-primary").addClass("btn-success").prop("disabled", true);

<强> HTML

<button class="btn btn-primary" data-eid="4107" data-pid="19372" data-image="/abbie1.jpg">
    profile image
</button>
<button class="btn btn-primary" data-eid="4107" data-pid="19373" data-image="/abbie2.jpg">
    profile image
</button>
<button class="btn btn-primary" data-eid="4107" data-pid="19374" data-image="/abbie3.jpg">
    profile image
</button>

<强> JS

$(".btn").click(function (e) {
if (confirm("Are you sure you wish to use this as your profile image?")) {
    var eid = $(this).attr('data-eid'); //like 4107
    var pid = $(this).attr('data-pid'); //like 19372
    var image = $(this).attr('data-image'); //like /abbie1.jpg
    var pushedBtn = $(this);
    $.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');
                    pushedBtn.removeClass("btn-primary").addClass("btn-success").prop("disabled", true);


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

更改ajax函数成功时单击按钮的类

4 个答案: