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

【问题标题】：Updating text in a specific class div with jquery使用 jquery 更新特定类 div 中的文本
【发布时间】：2015-04-11 16:55:07
【问题描述】：

在我的应用程序中，我使用 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;
  });
});

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

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

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

谢谢！

【问题讨论】：

它会将数据记录到您的控制台吗？也许尝试使用 id 定位您要更新的元素
是的，数据已记录，它还会刷新 div。所有.stock div，只需要刷新加入购物车的产品.stock div。我考虑过使用 ID，但后来我必须使用 product_id 作为 div id。不确定这是否可能？
尝试 .sibling 或 .parent，具体取决于您的 html 布局方式，请参阅 jsfiddle.net/kurtrohlandt/2b1fn2dk。您需要使用 javascripts 来识别 div
谢谢！这正朝着我拥有它的方向发展。但实际上有些不同。检查这个小提琴：jsfiddle.net/xjcajzvk 我已经添加了需要更新的 div。（也试过这个：$(this).parent(".product").siblings(".stock").css( "background-color", "red" );
这里我们开始 $("button.addtocart").click(function(){ $(this).siblings(".stock").css("background-color", "red" ); }); div 是兄弟，所以 .parent 在等式中没有位置。让我知道我是否可以将此作为答案发布

标签： javascript jquery html ruby-on-rails haml

【解决方案1】：

由于您的添加到购物车按钮位于具有类的 div 元素内，因此您需要定位该特定元素，而不是作为一个整体的类的所有元素。使用 Javascripts 来捕获触发事件的元素并使用 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>

【讨论】：