Question

我正在尝试根据选择框选择选项更新字段的值以及少量数量字段的数量，它适用于第一个字段，但对其余字段不起作用。

这是该网站的链接http://www.snappy-pizza.net/pizza1c.php

如果您是第一次选择披萨并添加配料，更新后的价格字段的价值将按预期增加，现在如果您使用相同的配料更改披萨，则只会将第一个顶部添加到价格中而不是其他的。

  <input name="update_price" type="text" id="update_price" value="" size="8" maxlength="8" />


  <form>
                <select name="select" id="select">
                  <option>Select your pizza</option>
                  <option value="6.65">NY, 10&quot;, £6.65</option>
                  <option value="8.95">NY, 12&quot;, £8.95</option>
                  <option value="11.95">NY, 16&quot;, £11.95</option>
                  <option value="3.45">Chicago, 7&quot;, £3.45</option>
                  <option value="6.65">Chicago, 10&quot;, £6.65</option>
                  <option value="8.95">Chicago, 12&quot;, £8.95</option>
                  <option value="11.95">Chicago, 16&quot;, £11.95</option>
                  <option value="19.95">Chicago, Beast 24&quot; x 18&quot;, £19.95</option>
                 </select>
         </form>


       <form>
         <tr>
            <td> 

            <span class="descriptionsPizza">EXTRA CHEESE</span>
            <input name="minus1" type="button" class="button minus" id="minus1" value=" - " />
            <input name="textfield1" type="text" id="textfield1" class="valfield" size="2" maxlength="2" value="0" />
            <input name="add1" type="button" class="button add" id="add1" value=" + " />
            </td>

            <td>
            <span class="descriptionsPizza">HAM</span>    
            <input name="minus2" type="button" class="button minus" id="minus2" value=" - " />
            <input class="valfield" name="textfield2" type="text" id="textfield2" size="2" maxlength="2" value="0"/>
            <input name="add2" type="button" class="button add" id="add2" value=" + " />
            </td>
            </tr>




           //function to change the quantity field by pressing the + and - buttons
   $(function()
    {
      topping_price = 1;
      $(".add").click(function(){
     var newQty =+($(this).siblings(".valfield").val()) + 1;
     $(this).siblings(".valfield").val(newQty);

 current_price =+($('input[name=update_price]').val() );
 $('input[name=update_price]').val(topping_price + current_price);
  });

 $(".minus").click(function(){
 var newQty = +($(this).siblings(".valfield").val()) - 1;
 if(newQty < 0)newQty = 0;
 $(this).siblings(".valfield").val(newQty);

var current_price =+($('input[name=update_price]').val() );
$('input[name=update_price]').val(current_price - topping_price);
});

}）;

  //function to get the value and text of the selected select box and insert them into hidden fields.
 $(function()
  {
$('#select').change( function() {
    $('input[name=my-item-name]').val( $("#select :selected").text() );
    $('input[name=my-item-price]').val( $("#select").val() );

    $(".add").each(function() {
        //gets the value of the selected box (i.e.price) and insert it into the updated price field.
        var new_qty =+ ($(".add").siblings(".valfield").val() );
        var pizza_price =+ ($("#select :selected").val() );
        $('input[name=update_price]').val((new_qty * topping_price) + pizza_price);
    });
});

}）;

任何帮助将不胜感激..

Answer 1

试试这个;

$(function() {
  $('#select').change(function() {
    var pizza_price = parseFloat($(this).val());
    var new_qty = 0;
    $(".add").each(function() {
      new_qty = new_qty + parseInt($(this).siblings(".valfield").val(), 10);
    });
    $('#update_price').val((new_qty * topping_price) + pizza_price);
  });
});

Answer 2

我改进了你的jquery.js文件。这个版本更清洁。

// JavaScript Document

var toppingPrice = 1;

//function to get the value and text of the selected select box and insert them into hidden fields.  
var updateTotalPrice = function() {
  var pizzaPrice = parseFloat($("#select").val());
  var quantity = 0;
  $(".add").each(function() {
    quantity = quantity + parseInt($(this).siblings(".valfield").val(), 10);
  });
  $('#update_price').val((quantity * toppingPrice) + pizzaPrice);
}

$(function()
{
  //functions to change the quantity field by pressing the + and - buttons
  // add buttons
  $(".add").click(function(){
    var $this = $(this);
    var quantity = parseInt($this.siblings(".valfield").val(), 10) + 1;
    $(this).siblings(".valfield").val(quantity);

    updateTotalPrice();
  });

  // minus buttons
  $(".minus").click(function(){
    var $this = $(this);
    var quantity = parseInt($this.siblings(".valfield").val(), 10) - 1;
    if(quantity < 0) quantity = 0;
    $(this).siblings(".valfield").val(quantity);

    updateTotalPrice();
  });

  // selectbox
  $('#select').change(function() {
    updateTotalPrice();
  });

  //function to generate a random number and insert them to the item id hidden field
  $('input[name=my-add-button]').click(function() {
    var randomNumber = Math.floor((Math.random() * 9000) + 100);
    $('input[name=my-item-id]').val(randomNumber);
  });
});

如何根据数量字段和选择框更改字段的值

2 个答案: