javascript - 获取和设置另一个 div 的值

Question

我正在使用 ASP.Net MVC4。我的 div 元素内容在循环中生成，如下所示:

@foreach (var product in Model.Products)
{
    <div class="col-md-2 vcenter">
        <span class="product-price">Preço: @Model.Price.ToString("C")</span>
    </div>

    @if (Model.IsValid != null && Model.IsValid != "")
    {
        <div class="col-md-2" style="text-align: end;">
            <span>Enter number.</span>
        </div>

        <div class="col-md-2 vcenter" style="text-align: end;">
            @Html.TextBoxFor(m => m.CouponTemp, new { 
                @class = "product-discount-coupon", 
                chart_price = Model.Price.ToString(), 
                dicsount_price = Model.SpecialPrice.ToString(), 
                product_coupon = Model.Coupon, 
                style = "width:50px;" 
            })
            <button type="button" class="apply-discount">Recalculate</button>   
        </div>
    }
}

JavaScript部分

$(".apply-discount").on("click", function () {
    var applyCoupon = $(this).parent().find(".product-discount-coupon").val();
    var price = $(this).parent().find(".product-price").val();
    var cost = 0;
    if (applyCoupon === NaN) {
        applyCoupon = 0;
    }

    if (price === NaN) {
        price = 0;
    }
    $(this).parent().find(".product-price").val(applyCoupon);
});

浏览器生成的 html 如下

<div>
    <div class="col-md-1">
        <img src="/Astrology/Product/GetImage/51da66b7-3cb9-418b-ae9a-bc9fe8073b26" style="width: 50px; height: 50px;" alt="Mapa Natal C&#225;rmico" />
    </div>
    <div class="col-md-6 vcenter">
        <span style="font-size: large">Mapa Natal C&#225;rmico. Escrito por Marcelo Dalla</span>
    </div>

    <div class="col-md-2 vcenter">
        <span class="product-price">Preço: R$ 44,00</span>
    </div>

    <div class="col-md-2 vcenter" style="text-align: end;">
        <button type="button" class="dec-count">-</button>

        <input chart-price="44,0000" class="product-count" data-val="true" data-val-number="The field Quantity must be a number." data-val-required="The Quantity field is required." dicsount-price="10,0000" id="products_7819060a-0f29-4637-83de-9262beb1a13f__Quantity" name="products[7819060a-0f29-4637-83de-9262beb1a13f].Quantity" product-coupon="10" readonly="readonly" style="width:50px;" type="text" value="1" />
        <button type="button" class="inc-count">+</button>
    </div>

        <span>If you have a discount coupon for the purchase please enter it here and press the recalculate button.</span>
        <div class="col-md-2 vcenter" style="text-align: end;">

            <input chart-price="44,0000" class="product-discount-coupon" dicsount-price="10,0000" id="products_7819060a-0f29-4637-83de-9262beb1a13f__CouponTemp" name="products[7819060a-0f29-4637-83de-9262beb1a13f].CouponTemp" product-coupon="10" style="width:50px;" type="text" value="" />
            <button type="button" class="apply-discount">Recalculate</button>

            <input id="apply-product-coupon" type="hidden" name="apply-product-coupon">
        </div>

    <div class="col-md-1 vcenter">
        <a href="/Astrology/Shop/DeleteFromCard?productId=41f7e40b-62ad-4202-964a-cbed7381b06c">
            <i class="fa fa-remove"></i>
        </a>
    </div>
</div>

当用户单击重新计算按钮时，我想将CouponTemp文本框值放入另一个span中。请注意，点击 block-1 不会影响 block-2 或休息，同样，点击 block-2 不会影响 block-2另一个 block 内容。

<span>Preço: @Model.Price.ToString("C")</span>

Answer 1

这是您的脚本:

$(document).ready(function(){
   $("button.apply-discount").click(function(){
      //get your input value
      var discount = $(this).prev('input.product-discount-coupon').first().val();
      //Get your span
      var resultSpan = $(this).parent().prev().prev().prev().find('span');
      //Update your span with input value
      resultSpan.html("Preço: R$ " + discount);
   });      
});

我创建JSFiddle展示它是如何工作的。