Question

我正在尝试创建一些计算脚本。我有一个带有一些输入字段的表单。一个是文本，一个是多个单选按钮。

我想根据设定的值更改价格字段。当我更改表格中的单选按钮时，我得到了这个工作。但是我仍然坚持如何使用updateQuantity函数的值来复用该值。该功能仅在我再次更改单选按钮时有效。

为了清楚起见，我创建了一个fiddle here。

我的HTML

<form action="url" id="product_configure_form" method="post">
<span class="price"></span>
<table id="order" class="order">
...
        <tbody>

          <tr>
            <td>
              <input type="radio" id="product_configure_custom_123_456" name="custom[123]" value="somevalue" data-price="99.95">
            </td>
          </tr>  
          <tr>
            <td>
              <input type="radio" id="product_configure_custom_321_654" name="custom[321]" value="somevalue" data-price="199.95">
            </td>
          </tr> 
        </tbody>

      </table>
    <input type="text" name="quantity" value="1" />
    <div class="change">
      <a href="javascript:;" onclick="updateQuantity('up');" class="up">+</a>
      <a href="javascript:;" onclick="updateQuantity('down');" class="down">-</a>
    </div>

</form>

我的剧本

<script type="text/javascript">
function updateQuantity(way){
    var quantity = parseInt($('.cart input').val());

    if (way == 'up'){
        if (quantity < 50){
            quantity++;
        } else {
            quantity = 50;
        }
    } else {
        if (quantity > 1){
            quantity--;
        } else {
            quantity = 1;
        }
    }

    $('.cart input').val(quantity);
}

  function update_amounts() {        
    var price = $('#order').find('input[type="radio"]:checked').data('price');
    var times = $('.cart input').val();
    var value = (price * times).toFixed(2);
    $('.price').text('€' + value);
  }

  $(document).ready(function(){
    $("#product_configure_form").on("change", "#order input", update_amounts);   
    $(".cart input").on("change keyup paste", update_amounts);   
  });
</script>

Answer 1

在update_amounts()功能结束时拨打updateQuantity()。

或者在我上面提到的同一行改变它：

$('.cart input').val(quantity).change();

工作演示

    function updateQuantity(way) {
      var quantity = parseInt($('.cart input').val());

      if (way == 'up') {
        if (quantity < 50) {
          quantity++;
        } else {
          quantity = 50;
        }
      } else {
        if (quantity > 1) {
          quantity--;
        } else {
          quantity = 1;
        }
      }

      $('.cart input').val(quantity);
      update_amounts()
    }

    function update_amounts() {
      var price = $('#order').find('input[type="radio"]:checked').data('price');
      var times = $('.cart input').val();
      var value = (price * times).toFixed(2);
      $('.price').text('€' + value);
    }

    $(document).ready(function() {
      $("#product_configure_form").on("change", "#order input", update_amounts);
      $(".cart input").on("change keyup paste", update_amounts);
    });

table.order {
  margin: 15px 0;
  width: 100%;
}
.order th {
  background: #eee none repeat scroll 0 0;
  padding: 10px;
  text-align: left;
}
.order td {
  padding: 5px 10px;
}
.price{
  background:#000;
  color:#fff;
  width:100px;
  height:100px;
  display:block;
  text-align:center;

  }  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="url" id="product_configure_form" method="post">
    <span class="price">bla</span>
    <table id="order" class="order">
    <thead>
          <tr>
            <th>title</th>
            <th>price</th>
          </tr>
        </thead>
            <tbody>
              
              <tr>
                <td>
                  <input type="radio" id="product_configure_custom_123_456" name="custom[123]" value="123456" data-price="99.95">
                   <label for="product_configure_custom_123_456">option a</label>
                </td>
                
          
            <td class="prijs">$99.95</td>
               
              <tr>
                <td>
                  <input type="radio" id="product_configure_custom_321_654" name="custom[123]" value="654321" data-price="199.95">
                   <label for="product_configure_custom_321_654">option b</label>
                </td>
               
          
            <td class="prijs">$199.95</td>
              </tr> 
            </tbody>
            
          </table>
          <div class="cart">
          
       
        <input type="text" name="quantity" value="1" />
        <div class="change">
          <a href="javascript:;" onclick="updateQuantity('up');" class="up">+</a>
          <a href="javascript:;" onclick="updateQuantity('down');" class="down">-</a>
        </div>
       </div>
    </form>

Jquery从两个更改函数返回值来计算

1 个答案: