javascript - 使用 Ajax 传递单击的提交按钮值

Question

我正在 WordPress 中工作，我有一个 html 表单，其中有两个具有相同类名和不同值的提交按钮。我通过 ajax 传递提交按钮点击值并将其显示在屏幕上。现在我的问题是，只有第一个提交按钮值会通过，而第二个提交按钮值永远不会显示在屏幕上。请指导，下面是我的代码。

代码

<form id="mydispimage" action="" method="post">
    <select id="category" style="width: 250px; background-color: lightgrey;" name="category">
        <option disabled="disabled" selected="selected" value="">Select category</option>
        <option value="Cutie Pie">Cutie Pie</option>
        <option value="Chubby">Chubby</option>
        <option value="Dimples">Dimples</option>
    </select>
    <input class="displayimage" name="displayimage" type="submit" value="star1" />
    <input class="displayimage" name="displayimage" type="submit" value="star2" />
</form>

JQuery

jQuery(function ($) {
    $(".displayimage").click(function (e) { //form is intercepted
        e.preventDefault();
        //show timer
        jQuery("#timer").css("display", "block");
        jQuery("#participate").css("display", "block");
        var vote = jQuery(".displayimage").val();
        alert(vote);

        //$("#timer").show(slow);
        //serialize the form which contains secretcode
        // var sentdata = $(this).serializeArray();
        //var vote = 1;
        //Add the additional param to the data        
        var sentdata = ({

            action: 'displaymyimage',
            foo: vote
        })

        //set sentdata as the data to be sent
        $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton
            //$("#myresult").append(res.l);
            //alert(res);
            $("#myresult").html(res);
            //$.parseJSON(data);
            return false;
        } //end of function
        ,
        'json'); //set the dataType as json, so you will get the parsed data in the callback
    });  // submit end here

});

Answer 1

改变这个

 var vote= jQuery(".displayimage").val();

到此

 var vote= jQuery(this).val();

您需要使用$(this)。否则，您将始终使用具有匹配 .displayimage 类的元素中的第一个值。这就是为什么您总是看到第一个按钮的值。