麻烦制作一个独特的按钮

时间:2014-07-04 09:13:28

标签: javascript php html

我有一种情况,我将这个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>

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

谢谢

3 个答案:

答案 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>');
    }
});
});

祝你好运