Javascript 具有相同效果的相同按钮-jquery OOP

我怎样才能给我的按钮同样的效果？因为它们都是一样的。但我想做的是，当我点击它们时，有一个“灵魂般”的验证

我的php代码

echo "<form action='receipt.php?name=$name' method='post'>
        <input style='position:absolute; top:$this->yForBuy; left:$this->xForBuy; z-index:4;' type='button' id='btnSubmit' value='Purchase'/>
        <input type='hidden' name='bidder' value='$name'>
        <input type='hidden' name='item_no' value='$no'>
        <input type='hidden' name='item_name' value='$itname'>
        <input type='hidden' name='item_price' value='$bid'>
        </form>";

<label id='soul' style='position:absolute; z-index:5; color:black;'>purchased!</label>

如果您在这里使用OOP结构，这就是为什么我有多个具有相同功能的按钮。我在javascript部分遇到了困难，我不知道该怎么做

---

id属性在页面上应该是唯一的，并且不会对每个按钮重复。 JS无法处理

#btnSubmit

多次出现的事实

如果代码是由php循环生成的，那么您可能需要实现ID的编号<代码>#btnSubmit1，

#btnSubmit2

等

向按钮添加一个类并将其用作公共选择器，或者尝试：

若要设置动画，请包含窗体的id属性（同样必须是唯一的）

然后在js中：

$(document).ready(function(){
     $("#soul").hide();

        $(".purchaseButton").click(function()
        {
            var position = $(this).position();
            var topTo = position.top-10;
            alert("position: "+position.top+"\n new position:"+topTo);
            $("#soul")
                .css({'top' : topTo , 'left' : position.left, 'display' : 'block'})
                .show();
            $('#WHATEVER').animate({
               // whatever options here..
               complete: function() { 
               // this will run after the animation has finished
               $('#FORMID').submit(); // manually submit the form
               }
            });
        });
     });

---

“类似灵魂”的验证意味着什么？在.animate（）部分中，当单击按钮时，文本会上升，同时消失：P很抱歉我的解释。谢谢你这很好地解决了我的问题：Dbtw，在提交表单之前，我如何才能先设置.animate（）？您可以在

事件中执行必要的动画，而不是使用
type=“submit”
。单击
事件，然后只需调用
$（“#FORMID”）.submit（）（您需要在表单html中添加一个
id=”“
。
echo "<form action='receipt.php?name=$name' method='post'>
        <input style='position:absolute; top:$this->yForBuy; left:$this->xForBuy; z-index:4;' type='button' class='purchaseButton' value='Purchase'/>
        <input type='hidden' name='bidder' value='$name'>
        <input type='hidden' name='item_no' value='$no'>
        <input type='hidden' name='item_name' value='$itname'>
        <input type='hidden' name='item_price' value='$bid'>
        </form>";

<label id='soul' style='position:absolute; z-index:5; color:black;'>purchased!</label>

$(document).ready(function(){
 $("#soul").hide();

    $(".purchaseButton").click(function()
    {
        var position = $(this).position();
        var topTo = position.top-10;
        alert("position: "+position.top+"\n new position:"+topTo);
        $("#soul")
            .css({'top' : topTo , 'left' : position.left, 'display' : 'block'})
            .show();
    });
 });

$(document).ready(function(){
     $("#soul").hide();

        $(".purchaseButton").click(function()
        {
            var position = $(this).position();
            var topTo = position.top-10;
            alert("position: "+position.top+"\n new position:"+topTo);
            $("#soul")
                .css({'top' : topTo , 'left' : position.left, 'display' : 'block'})
                .show();
            $('#WHATEVER').animate({
               // whatever options here..
               complete: function() { 
               // this will run after the animation has finished
               $('#FORMID').submit(); // manually submit the form
               }
            });
        });
     });