Question

我正在开发通用购物车，在主页面我有几个项目，如果用户点击添加到购物车按钮，则在底部有一个按钮，价值通过jquery存储在购物车中，但问题是如果用户点击图像它也存储在购物车中的产品数据我希望只添加到购物车按钮工作，但当用户点击图像时，它也存储在购物车中的值我怎么能只用按钮我附加点击事件我尝试了trigger（）函数但无法达到我的目标请帮助我。这是我的HTML。

<div class="col-md-9" >

        <?php if(isset($products))
        {

            foreach($products as $row)
            {
            ?>
        <div class="row" >
            <div class="col-md-4" >
                <div class="product cartoon">
                    <a href="products/<?=$row->sub_c_id?>/<?=$row->pid?>">
                    <img  class="imgslct" alt="<?=$row->pname?>" height="173" width="144" src="<?php echo base_url(); ?>uploads/<?=$row->product_pic?>">                                        
                    </a>
                    <div class="name">
                    <a href="#" class="pname"><?=$row->pname?></a>
                    </div>
                    <div>
                    <p class="price" data-value="<?=$row->pprice?>">price : <?=$row->pprice?></p>
                    <input type="hidden" class="pid" value="<?=$row->pid;?>">
                    <input type="hidden" class="subcid" value="<?=$row->sub_c_id;?>">

                    <input type="hidden" class="pquan" value="<?=$row->pquantity;?>">
                    <input type="hidden" class="size"  value="<?=$row->size;?>">
                    <input type="hidden" class="color" value="<?=$row->color;?>">
                    <button class="addtocart">Add to cart</button>
                    </div>
                </div>
            </div>  
            <?php 
            }
            } 
            ?>

        </div>

这是我的jquery脚本。

<script type="text/javascript">
    $(document).ready(function() {
    var counter=1;
       $(document).on('click',".cartoon",function(){

           var pic=$(this).find(".imgslct").attr('src');
           alert (pic);
           var imgdata= $(this).find(".pname").text();
           var productquantity= $(this).find('.pquan').val(); 
           var color= $(this).find(".color").val();
           var size= $(this).find('.size').val(); 
           var productid=$(this).find('.subcid').val(); 
           var price=$(this).find(".price").attr('data-value'); 
           var qty="1";
           var session_id="<?=$this->session->userdata('session_id');?>";
           var pid=$(".pid").val();


           $.ajax({
               type:"post",
               url:"<?=base_url();?>check_upload",
               data:"session_id="+session_id+"&imgdata="+imgdata,
               success: function(data)
              {
                var check=data;
                var check1=$.trim(check);
                $(".core").val(check1);
                alert(check1);
                if(check1==1)
                {
                    alert("Product already added");
                }
                else
                {
                    //start block of adding cart values 
                     var cn=$("#co").val();
                     var cnc=counter++;
                     var total=parseInt(cn)+parseInt(cnc);
                     $("#counter").text(total);
                     //end block of adding cart values

                      $.ajax({
        type:"post",
        url:"<?=base_url();?>temp_upload",
        data:"pic="+pic+"&imgdata="+imgdata+"&productquantity="+productquantity+"&productid="+productid+"&price="+price+"&qty="+qty+"&session_id="+session_id+"&pid="+pid+"&color="+color+"&size="+size,
        success: function(data)
        {
            alert(data);
            $("#uploaded").html();
        }
        });     

           $("#newdata").append('<tr><td class="image"><img alt="IMAGE" class="img-responsive" src="'+pic+'"></td><td class="name"><a href="project.html">'+imgdata+'</a></td><td class="quantity">x&nbsp;3</td><td class="total" data-value="'+price+'">'+price+'</td><td class="remove"><img src='+pic+' alt="Remove" title="Remove"></td></tr>');

            //totaling the price of products
    var intial=$("#totaling").attr('data-value');
    var t=$(".total").attr('data-value');
    var totaling=parseInt(intial)+parseInt(t);
    $("#totaling").attr('data-value',totaling);
    $("#totaling").text(totaling);
   // end of totaling   

    //start of sub-totaling the price
    var s_intial=$("#sub-total").attr('data-value');
    var s_t=$(".total").attr('data-value');
    var s_totaling=parseInt(intial)+parseInt(t);
    $("#sub-total").attr('data-value',s_totaling);
    $("#sub-total").text(s_totaling);
    //end of sub-totaling the price

                }

              }
           });

<!-- for inspecting the item is added or not -->          
 //$("#myElem").show().delay(5000).fadeOut();
           });

    });

</script>

Answer 1

只需更正您拥有的选择器，并更新find那些元素的路径：

$(document).on('click',"button.addtocart",function(){
    var $btn = $(this);
    var $cartoon =  $(this).closest(".cartoon");
    var pic = $cartoon.find(".imgslct").attr('src');
    var imgdata = $cartoon.find(".pname").text();
    /* and so on */
});

另一个工作流程是获取event.target值：

$(document).on('click',".cartoon",function(e){
    if (!$(e.target).hasClass("addtocart")) { return; }
    /* ... */
});

但是第一个更好，因为你没有抓住.cartoon div的所有点击。

jquery onclick函数不仅在按钮上工作整个div

1 个答案: