根據輸入值更改div內容

Question

我有一些帶有某些數據的json文件。我試圖做的是獲得輸入值，然後當它與折扣規則中的一個相匹配時，價格字段應該改變爲合適的價格。

我的JSON：

{ 
    "product": { 

    "discounts": { 

     "10": { 
     "id": "151203", 
     "quantity": "10", 
     "price": { 
      "price": 5.35 

     }, 
     "percentage": 0.05, 
     "unit": false 
     }, 

     "50": { 
     "id": "151204", 
     "quantity": "50", 
     "price": { 
      "price": 4.95 

     }, 
     "percentage": 0.12, 
     "unit": false 
     } 

    } 

    } 
} //etc 

我的HTML

<div class="quantity" id="wqs-quantity"> 
    <input type="text" name="quantity" value="1">           
</div> 

到目前爲止我的jquery：

var qty = $('#wqs-quantity input').val(); 
$('#wqs-quantity input').change(function(e){ 
if(qty == discount.quantity){ 
    $('.wqs-price .item-price').text(discountPrice); 
} 
}); 

這段代碼是一個電話的getJSON裏面。

眼下價格字段隨時更改至4.95。所以我嘗試的是，當有人在10或50的pricefield更改爲€4.95 5.35€罷了......

有誰知道我在做什麼錯？

Answer 1

1）你錯過了 「折價」 的開口：{[3號線]

2）通過所有可能的 '折扣' 一個循環內的if語句？

嘗試使用循環像這樣的（其中，值p是JSON對象）：

$('#wqs-quantity input').change(function(e){ 
 
     var qty = $(this).val(); 
 
     var d = p.product.discounts; 
 

 
     for (var key in d) { 
 
     if (d.hasOwnProperty(key)) { 
 
      if (qty == d.key.quantity) { 
 
      $('.wqs-price .item-price').text(discountPrice); 
 
      } 
 
     } 
 
     } 
 

 
    });

3）如果折扣具有當量是至少在折扣的量要施加（以便5％ 10折優惠，50折優惠12％）。然後你可以使用這個循環（其中檢查每一個數量門檻，並保存應用於最後一個）：（。對於這項工作，在不同的「折扣」應該從最低數量門檻責令最高）

var p = JSON.parse(data); 
 

 
    $('#wqs-quantity input').change(function(e){ 
 
     // get new quantity 
 
     var qty = $(this).val(); 
 

 
     // get discount thresholds 
 
     var d = p.product.discounts; 
 

 
     // the current value to fall back on 
 
     var new_price = $('.wqs-price .item-price').text(); 
 

 
     // loop through all discounts 
 
     for (var key in d) { 
 
     if (d.hasOwnProperty(key)) { 
 
      var diff = (qty-d[key].quantity); 
 

 
      // check if current quantity is above (or the same as) the threshold 
 
      if (diff >= 0) { 
 
      new_price = d[key].price.price; 
 
      } 
 
     } 
 
     } 
 

 
     $('.wqs-price .item-price').text(new_price); 
 

 
    });

4）爲什麼在價格內使用對象「價格」？ （例如， 「discounts.10.price.price」，而不是 「discounts.10.price」）

工作例如：http://jsfiddle.net/PhilQ/ga59vbx3/11

Answer 2

獲取變化事件中輸入值：

if($(this).val() == discount.quantity){ 
    ... 
} 

否則你永遠retrieve the initial value

Answer 3

你要綁定的qty值一旦當.change()監聽器被定義，所以這是它一直認爲存在，無論數量是否是數量茶nges。

你，而不是想那項任務移動到功能：

// clean up the data format first into the discounts array: 
var data = JSON.parse(json_data); 
var discounts = [], tmp; 
for (var key in data.product.discounts) { 
    if (data.product.discounts.hasOwnProperty(key)) { 
     tmp = data.product.discounts[key]; 
     tmp.quantity = Number(tmp.quantity); 
     tmp.price = tmp.price.price; 
     discounts.push(tmp); 
    } 
} 
discounts.sort(function (x, y) { 
    return x.quantity - y.quantity; 
}); 

// now for the actual logic: 
$('#wqs-quantity input').change(function(e) { 
    var price, qty = this.val(); 
    discounts.forEach(function (disc) { 
     if (qty >= disc.quantity) { 
      price = disc.price; 
     } 
    }); 
    if (price !== undefined) { 
     $('.wqs-price .item-price').text(price); 
    } 
}); 

好吧，這個處理比你簡單的例子多了不少。首先要注意的是，我基本上將您的JSON轉換爲其他一些JSON，這使得問題變得更加容易。

之後，我們遍歷dicsounts，如果數量比折量大的情況下，我們制定了一個函數局部變量稱爲「價格」，以折扣的價格。如果該價格被設置（因此不會保持未定義），那麼我們將項目價格更改爲該值。功能裏面的this.val()是關鍵的東西;那就是說我們要在每一個給定的循環中取得價值，而不是在開始時考慮一次。