Question

在我的应用程序中，我使用jquery将产品添加到购物车。这部分有效，但现在我想刷新一些div，以便在将产品添加到购物车后显示更新的信息。

首先是一些代码：这就是产品向用户展示的方式

- @products.each do |product|
    .product
      .photo
        - x = 0
        - @product_attachments.each do |attachment|
          -if product.id == attachment.product_id && x == 0
            = image_tag attachment.image_url(:thumb)
            - x = 1
      .product_information
        .product_name
          %h3
            = product.name
        .product_price
          %h2
            = number_to_currency(product.price, :unit => "€", :separator => ",", :delimiter => ' ')
        %h4
          Categorie: #{product.category.title}
        %p.description
          =product.description
        %br/
        .stock
          Op vooraad: #{product.stock}
        .product_options
          = link_to 'meer informatie', product, class: 'show_product_link'
        = link_to orders_path(:product => product.id), :method => :post, :class=>'addToCart', :data => { :product_id => product.id} do
          .add_to_cart
            Toevoegen aan winkelmand
        - if user_signed_in? && current_user.admin?
          \#{link_to 'Edit', edit_product_path(product)} |
          \#{link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' }}

当您单击链接以向购物车添加内容时，此jquery将执行：

function refresh_information(data){
  //reloading the cart div to show the updated price
  $( ".cart" ).load(location.href + " .ajaxload");
  //reloading the stock div to show the updated stock
  $( ".stock" ).html( "Op vooraad:" +data.stock );
  console.log(data);
}

jQuery(function(){
  //listen for click on a class because this link is created dynamically
  $(".addToCart").click(function() {
    //put $(this) to select the data from the link that's actually clicked
    var product = $(this).data( "productId" );
    //ajax request to controller action to add product to cart
    $.ajax({
      type: "POST",
      url: "/orders",
      data: { product: {id: product} },
      success:function(data) {
        //refresh some div's information
        refresh_information(data);
      }
    });
    return false;
  });
});

好吧，现在一切正常，直到我想刷新股票div。它会在您添加到购物车的产品中显示正确的库存，但它会刷新所有库存div以及其他产品的库存;放入购物车中的产品库存。

现在我知道你可以使用$.(this)，我实际上是为了获得正确的产品ID。但是股票div在$.(this)之外，所以这并不是我所知道的。

任何人都知道（非常简单）解决方案只刷新添加到购物车的产品的库存div？

谢谢！

Answer 1

由于您的添加到购物车按钮位于带有类的div元素内，因此您需要定位该特定元素而不是所有具有该类的元素。使用Javascripts来捕获触发事件的元素，并使用jquerys .parent或.sibling函数来定位div应该可以正常工作。

＆＃13;

$("button.addtocart").click(function(){
$(this).siblings(".stock").css( "background-color", "red" );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
    <div class="stock">
        This div needs to be updated
    </div>
    a
    <button class="addtocart">add to cart</button>
</div>
<div class="product">
    <div class="stock">
        This div needs to be updated
    </div>
    b
    <button class="addtocart">add to cart</button>
</div>
<div class="product">
    <div class="stock">
        This div needs to be updated
    </div>
    c
    <button class="addtocart">add to cart</button>
</div>

＆＃13;

使用jquery更新特定类div中的文本

1 个答案: