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

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?' }}

当您单击 link 将商品添加到购物车时，此 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。它显示您添加到购物车的产品的正确库存，但它会刷新所有库存 divs 以及其他产品的库存；到您放入购物车的产品的库存。

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

有人知道一个（非常简单的）解决方案来仅刷新添加到购物车的产品的库存 div 吗？

谢谢！

Answer 1

由于您的“添加到购物车”按钮位于带有 class 的 div 元素内，因此您需要针对该特定元素而不是整个带有 class 的所有元素。使用 Javascripts this 来捕获触发事件的元素并使用 jquerys .parent 或 .sibling 函数来定位 div 应该有效。

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

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

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

Updating text in a specific class div with jquery

javascript

jquery

html

ruby-on-rails

haml