我有一种情况,我将这个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>
但它不起作用。有人可以帮忙吗?
谢谢
答案 0 :(得分:0)
您应该将功能更改为:
<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变量中
答案 1 :(得分:0)
试试这个:
使用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;?>
。
答案 2 :(得分:0)
你实际上并不需要使你的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>');
}
});
});
祝你好运