javascript - 单击时更新输入值

Question

我有输入:

<form>
  <input class="total" type="text" value="" readonly="readonly" />
</form>

和div:

<div class="product">
  <figure>
    <img src="img/1.jpg" alt="product 1" />
    <!-- Hover -->
    <figcaption>
      <p>Add to input</p>
    </figcaption>
  </figure>
  <p class="descript">Description</p>
  <p class="price">99,00</p>
</div>

问题:如何通过每次点击的价格来增加输入值？

现在我只增加点击次数。

<强> Fiddle 。

Answer 1

首先将您的总数初始化为 0:

<input class="total" type="text" value="0" readonly="readonly" />

每次您单击获取total值并向其添加product_price值时，请参阅下面的工作示例。

希望这有帮助。

    $(".product").click(function() {

        var product_price = parseFloat ( $('.price').text() );
        var total         = parseFloat ( $('.total').val() );

        if( !isNaN( total ) )
        {
            $(".total").val( parseFloat( total + product_price));
        }
    });    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input class="total" type="text" value="0" readonly="readonly" />
</form>

<div class="product">
    <figure>
        <img src="img/1.jpg" alt="product 1" />
        <!-- Hover -->
        <figcaption>
          <p>Add to input</p>
        </figcaption>
      </figure>
      <p class="descript">Description</p>
      <p class="price">99,00</p>
    </div>