Javascript 使按钮独特的问题

我有一种情况，我将此java脚本用于单个按钮，其工作原理如下：

<script type="text/javascript">
$(document).ready(function(){

    $(document).on('click','a.btn-success',function(e){
        e.preventDefault();
        var myProductID=$(this).data('productid');
        var myUserid=$(this).data('iam');
        var postData={productID:myProductID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success').remove();
                $('a.btn-success').remove();
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Added</button></p>');
            }
        });
    });
});
</script> 

              <!-- Add to cart button -->
                    <?php echo "<p><a class='btn btn-success'$button_id' btn-xs btn-block' data-productid=' $current_product->product_id;' data-userid='$userID' href='../incl/ajax-add-to-cart.php'>Add</a></p>"?>
                    <p id="ajax-response"></p>

我所做的是这样的：

<script type="text/javascript">
$(document).ready(function(){

    $(document).on('click','a.btn-success',function(e){
        e.preventDefault();
        var myProductID=$(this).data('productid');
        var myUserid=$(this).data('iam');
        var postData={productID:myProductID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success').remove();
                $('a.btn-success').remove();
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Added</button></p>');
            }
        });
    });
});
</script> 

              <!-- Add to cart button -->
                    <?php echo "<p><a class='btn btn-success'$button_id' btn-xs btn-block' data-productid=' $current_product->product_id;' data-userid='$userID' href='../incl/ajax-add-to-cart.php'>Add</a></p>"?>
                    <p id="ajax-response"></p>

请注意，我正在尝试将变量“$button_id”附加到按钮的名称（它实际上是一个具有引导按钮样式的标记）

然后在JavaScript中，我执行以下操作：

<script type="text/javascript">
$(document).ready(function(){

    $(document).on('click','a.btn-success'.$button_id,function(e){ //added button id
        e.preventDefault();
        var myBookID=$(this).data('bookid');
        var myUserid=$(this).data('iam');
        var postData={bookID:myBookID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success'.$button_id).remove();//added button id
                $('a.btn-success'.$button_id).remove();//added button id
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Tillägt</button></p>');
            }
        });
    });
});
</script>

$（文档）.ready（函数（）{
$（文档）.on（'click'，'a.btn-success'.$按钮id，函数（e）{//添加了按钮id
e、 预防默认值（）；
var myBookID=$（this.data（'bookid'）；
var myUserid=$（this.data（'iam'）；
var postData={bookID:myBookID，userid:myUserid}；
$.ajax({
url:this.href，
类型：“POST”，
数据：postData，
成功：函数（数据、文本状态、jqXHR）{
$（'a.btn-success'.$按钮id）.remove（）；//添加了按钮id
$（'a.btn-success'.$按钮id）.remove（）；//添加了按钮id
$（'ajax response'）.html（'Tillägt
'）；
}
});
});
});

但它不起作用。有人能帮忙吗

---

谢谢

您可能应该将您的功能更改为：

<script type="text/javascript">
$(document).ready(function(){
    var button_id = '<?php echo $button_id; ?>';
    $(document).on('click','a.btn-success'+button_id,function(e){ //added button id
        e.preventDefault();
        var myBookID=$(this).data('bookid');
        var myUserid=$(this).data('iam');
        var postData={bookID:myBookID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success'+button_id).remove();//added button id
                $('a.btn-success'+button_id).remove();//added button id
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Tillägt</button></p>');
            }
        });
    });
});
</script>

$（文档）.ready（函数（）{
变量按钮id=“”；
$（文档）.on（'click'，'a.btn-success'+按钮id，函数（e）{//添加了按钮id
e、 预防默认值（）；
var myBookID=$（this.data（'bookid'）；
var myUserid=$（this.data（'iam'）；
var postData={bookID:myBookID，userid:myUserid}；
$.ajax({
url:this.href，
类型：“POST”，
数据：postData，
成功：函数（数据、文本状态、jqXHR）{
$（'a.btn-success'+按钮id）.remove（）；//添加了按钮id
$（'a.btn-success'+按钮id）.remove（）；//添加了按钮id
$（'ajax response'）.html（'Tillägt
'）；
}
});
});
});

我假设此JavaScript文件位于PHP文件中，您可以使用简单的

将

$button\u id

值放入JavaScript变量中，尝试以下操作：
使用firebug工具检查您的按钮，我认为它不是唯一的

<?php echo "<p><a class='btn btn-success".$button_id." btn-xs btn-block' data-productid='".$current_product->product_id."' data-userid='".$userID."' href='../incl/ajax-add-to-cart.php'>Add</a></p>"?>

---

在你的js中将

$button\u id

更改为

。

你实际上不需要让你的btn成为独一无二的 （特别是当它不是由你的逻辑）

我会做以下改变：

使用$（e.target）代替$（this） 对于ajax响应- 在html中，您可以将其转换为

<p id="ajax_response" ></p>

到

---

谢谢。我的问题是，通过附加唯一id，我失去了引导样式。有什么方法可以保存它吗？例如：
我不知道我是否理解这是如何保存按钮的boostrap样式的？然后，当回显按钮时，数据productid没有设置为产品的id。。。。
<p class="ajax_response" id="ajax_response_<?php echo $prod_id; ?>" ></p>

$(document).on('click','a.btn-success',function(e){    
e.preventDefault();
var $btn = $(e.target); // you may console.log( $btn ); here if you wish so

var myProductID= $btn.data('productid'); // all references to $(this) are replaced by $btn
var myUserid=$btn.data('iam');
var postData={productID:myProductID,userid:myUserid};

$.ajax({
    url: $(btn).href,
    type:"POST",
    data: postData,
    success: function(data, textStatus, jqXHR){                
        var $ajaxResponseDiv = $('#ajax_response_'+myProductID);
        $btn.remove();
        $ajaxResponseDiv.html('<p><button type="button" class="btn btn-info btn-xs btn-block">Added</button></p>');
    }
});
});