2016-08-25 3 views
1

Я новичок здесь, и новый с JQuery, и я застреваюJQuery оповещение возвращает NaN

HTML:

<div class='col-md-2'>$pro_name</div> 
<div class='col-md-2'><input type='text' class='form-control qty' pid='$pro_id' id='$qty-$pro_id' value='$qty' ></div> 
<div class='col-md-2'><input type='text' class='form-control price' pid='$pro_id' id='$price-$pro_id' value='$pro_price' disabled></div> 
<div class='col-md-2'><input type='text' class='form-control total' pid='$pro_id' id='$total-$pro_id' value='$total' disabled></div> 

Jquery:

$("body").delegate(".qty","keyup", function(){ 
    var pid = $(this).attr("pid");   
    var qty = $("#qty-"+pid).val(); 
    var price = $("#price-"+pid).val(); 
    var total = qty * price;   
    alert(total); 
}) 

Jquery оповещение возвращает NaN.

+0

вы инспектировать значения PID, Qty и цене? –

+1

Что вы пытаетесь сделать? нет необходимости использовать ut $ в htm-полях –

+0

Я работаю над учебным проектом из этого видео: https: //www.youtube.com/watch? v = XVivL6cupxo & list = PLB_Wd4-5SGAbYqmJ4OVF24g0lNFnUap-W & index = 22. Моя проблема начинается 6:45. Я не получаю общее предупреждение –

ответ

0

Ваше значение total не является числовым, это строка, и вы пытаетесь выполнить несколько строк, чтобы получить nan. Измените свои значения на некоторые числовые данные и попробуйте.

0

Используйте приведенный ниже код. Количество ошибок в вашем коде.

  1. Не нужно использовать '$' с полями html.
  2. Вы имеете диспенсировать поле цены, где вам нужно ввести значение.

Более подробно о том, что использовать с атрибутом HTML Id, проверить этот SO link

<div class='col-md-2'> 
    <input type='text' class='form-control qty' pid='pro_id' id='qty_pro_id' ></div> 
    <div class='col-md-2'><input type='text' class='form-control price' pid='pro_id' id='price_pro_id' ></div> 
    <div class='col-md-2'><input type='text' class='form-control total' pid='pro_id' id='total_pro_id' disabled> 
</div> 

$("body").delegate(".qty,.price","keyup", function(){ 

    var pid = $(this).attr("pid");    
    var qty = $("#qty_"+pid).val(); 
    var price = $("#price_"+pid).val(); 
    var total = qty * price;   
    alert(total); 
}) 

JS Fiddle

+0

Этот код не помог. возможно, я не дал всю информацию. \t https://www.youtube.com/watch?v=XVivL6cupxo Моя проблема начинается с 6:45. Я не получаю полное предупреждение –

+0

, что здесь отсутствует? –

+0

Проверьте этот скрипт https://jsfiddle.net/ufqsmLwy/ @VedranBrendy –

1

Одна проблема у вас есть изначально с синтаксисом селектора. Если вы хотите использовать специальные символы в селекторе jQuery, aka '$', вы должны избегать их с помощью двойных слэшей '\\', как я сделал в примере ниже.

Значения, которые у вас есть в настоящее время, очевидно, не являются номерами, но даже если бы они были, вы все равно получили бы «NAN». Вы должны использовать parseInt() для параметров значения, так как сами значения считаются строками, а не цифрами.

parseInt() принимает два параметра. Первый - это значение, которое вы хотели бы преобразовать в целое число, а второе - это основание. В моем примере я использовал радиус «10», который преобразует значения в простое десятичное число.

Если вы хотите узнать больше о ParseInt вот ссылка: http://www.w3schools.com/jsref/jsref_parseInt.asp

Я пошел вперед и установить два значения входной переменной по умолчанию для фактического числа, так что вы можете проверить сами.

$(document).ready(function() { 
 
    $("body").delegate(".qty","keyup", function(){ 
 
    var pid = $(this).attr("pid");   
 
    var qty = parseInt($("#\\$qty-"+'\\'+pid).val(), 10);  
 
    var price = parseInt($("#\\$price-"+'\\'+pid).val(), 10); 
 
    var total = qty * price;   
 
    alert(total);  
 
}) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    
 
<div class='col-md-2'>$pro_name</div> 
 
    
 
<div class='col-md-2'><input type='text' class='form-control qty' pid='$pro_id' id='$qty-$pro_id' value='2'></div> 
 
    
 
<div class='col-md-2'><input type='text' class='form-control price' pid='$pro_id' id='$price-$pro_id' value='5' disabled></div> 
 
    
 
<div class='col-md-2'><input type='text' class='form-control total' pid='$pro_id' id='$total-$pro_id' value='$total' disabled></div> 
 
    
 
</body>

Смежные вопросы