jquery返回数据属性的RNan

Question

我正在用jquery构建一个简单的计算器。我有两个选择字段，在这里看到

<label for="gold"> 
     <span>Choose Gold</span> 
     <select name="ValOne" id="ValOne" class="DropChange"> 
      <option data-price="<?php echo $rs_type_rows['paladium']; ?>">Palladium</option> 
      <option data-price="<?php echo $rs_type_rows['nineK']; ?>">9K (white gold)</option> 
      <option data-price="<?php echo $rs_type_rows['fourteenkwhite']; ?>">14K (white gold)</option> 
      <option data-price="<?php echo $rs_type_rows['fourteenkyellow']; ?>">14K (yellow gold)</option> 
      <option data-price="<?php echo $rs_type_rows['eighteenkwhite']; ?>">18K (white gold)</option> 
      <option data-price="<?php echo $rs_type_rows['eighteenkyellow']; ?>">18K (yellow gold)</option> 
      <option data-price="<?php echo $rs_type_rows['twentytwokwhite']; ?>">22K (yellow gold)</option> 
      <option data-price="<?php echo $rs_type_rows['platinum']; ?>">Platinum (950)</option> 
     </select> 
    </label> 



    <label for="carats"> 
     <span>Choose Carats</span> 
     <select name="ValTwo" id="ValTwo" class="DropChange"> 
      <option data-price="<?php echo $rs_size_rows['twenty']?>">0.20 Carats (~3.8mm)</option> 
      <option data-price="<?php echo $rs_size_rows['thirty']?>">0.30 Carats (~4.2mm)</option> 
      <option data-price="<?php echo $rs_size_rows['fourty']?>">0.40 Carats (~4.8mm)</option> 
      <option data-price="<?php echo $rs_size_rows['fifty']?>">0.50 Carats (~5.2mm)</option> 
      <option data-price="<?php echo $rs_size_rows['sixty']?>">0.60 Carats (~5.4mm)</option> 
      <option data-price="<?php echo $rs_size_rows['seventy']?>">0.70 Carats (~5.7mm)</option> 
     </select> 
    </label> 

我有这个jQuery会做计算

$(document).ready(function() { 
     $(".DropChange").change(function(){ 
      var ValOne = parseInt($('#ValOne').attr("data-price"), 10); 
      var ValTwo = parseInt($('#ValTwo').attr("data-price"), 10); 
      var ValThree = $('#ValThree').val(); 
      var totalTotal = ((ValOne * 1) * (ValTwo * 1)); 
      $('#Total').text('Price: R ' + totalTotal + ' Size: ' + ValThree); 
      $('#quote_btn').show(); 



    }); 
}); 

我有双重检查，并确保从PHP里的值是数字，一些有小数位，但它们都是数字。

当我运行这个jquery时，我得到了一个RNaN的结果，说它不是一个数字。

它使用价值，而不是数据价格，但我需要我的价值属性的一些PHP，我会在稍后使用。所以我需要改变它，但是当我做到了这一点时，它就被打破了。有人知道这是为什么吗？或者知道如何解决它的任何理论？

Answer 1

因为select元素没有该属性，所以选项会。选择所选的选项。

parseInt($('#ValOne option:selected').attr("data-price"), 10);