Question

我有一种情况，我将这个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 -->
                    <p><a class="btn btn-success btn-xs btn-block" data-productid="<?php echo $current_product->product_id; ?>" data-userid="<?php echo $userID; ?>" href="../incl/ajax-add-to-cart.php">Add</a></p>
                    <p id="ajax-response"></p>

这有效!!

我现在想要的是将它与产品列表一起使用，其中每个产品除了其图片之外还有一个“添加”按钮，表示为：

 a.btn-success

我正在做的是这样的事情：

              <!-- 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>

但它不起作用。有人可以帮忙吗？

谢谢

Answer 1

您应该将功能更改为：

<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>

我认为这个JavaScript文件位于PHP文件中，您可以使用简单的$button_id

将<?php echo $button_id; ?>值放入JavaScript变量中

Answer 2

试试这个：
使用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_id更改为<?php echo $button_id;?>。

Answer 3

你实际上并不需要使你的btn独一无二来使这项工作（特别是当你的逻辑不符合时）。

我会通过以下更改来实现它：

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

转换它

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

到

<p class="ajax_response" id="ajax_response_<?php echo $prod_id; ?>" ></p>

或者您可以重新排列html，使它们成为同一逻辑父级的一部分然后使用jclery函数，如.closest（）//搜索父项和.find（）查找子项

$(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>');
    }
});
});

祝你好运

麻烦制作一个独特的按钮

3 个答案: