为什么变量在JS中被识别为数字?

时间:2014-11-22 06:05:15

标签: javascript jquery html css

DEMO

我正在尝试创建一个网站的简单部分,允许用户加上或减去一个按钮来显示或删除更多HTML元素。

但是我可以通过设置一个数字来有效地做到这一点。但是当我使用输入框的值时,它不起作用。可以添加或减去此输入框,具体取决于单击的按钮,该部分工作正常。

HTML:

<p>
  <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus"/>
  <input id="qty2" type="text" value="1" class="qty"/>
  <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
</p>

<div class="thisdiv"></div>
<div class="thisdiv"></div>
<div class="thisdiv"></div>
<div class="thisdiv"></div>
<div class="thisdiv"></div>

CSS:

.thisdiv {
  width:100px; 
  height:100px; 
  float:left; 
  clear:both; 
  border:1px solid black;
  margin-bottom:10px;
}

JS:

$(function () {
  // Automatically hide all the thumbnails
  $('.thisdiv').hide();

  // When the add button is clicked
  $('.add').on('click',function(){
    // Find the nearest value of p and set qty to equal the value in the input box
    var $qty=$(this).closest('p').find('.qty');
    // Set variable currentVal to the new value of the qty
    var currentVal = parseInt($qty.val());
    // If the current value is a number then add one.
    if (!isNaN(currentVal)) {
      $qty.val(currentVal + 1);
    }
    // Return debug message
    console.log("ADDED ONE. VALUE NOW: " + (currentVal + 1));

    // This should set the number of divs to display to the 
    // value of currentVal, but it does not work?

    $('.thisdiv:lt(currentVal)').show();
  });

  // When the minus button is clicked
  $('.minus').on('click',function(){
    // Find the nearest value of p and set qty to equal the value in the input box
    var $qty=$(this).closest('p').find('.qty');
    // Set variable currentVal to the new value of the qty
    var currentVal = parseInt($qty.val());
    // If the current value is more than 0 and is a number then minus one
    if (!isNaN(currentVal) && currentVal > 0) {
      $qty.val(currentVal - 1);            
    }
    // Return debug message
    console.log("SUBTRACTED ONE. VALUE NOW: " + (currentVal - 1));

    // This should set the number of divs to display to the 
    // value of currentVal, but it does not work?
    $('.thisdiv:lt(currentVal)').show();
  });
});

如果用实数替换currentVal,则可以显示数字 但这并不像我想要的那样充满活力。为什么当前的版本不起作用? 此处的示例适用$('.thisdiv:lt(2)').show();,而$('.thisdiv:lt(currentVal)').show();即使currentVal是有效数字也不会。

1 个答案:

答案 0 :(得分:1)

$('.thisdiv:lt(currentVal)').show();根本不使用变量currentVal,它只是将文字文​​本'currentVal'作为选择字符串的一部分。试试这个:

$('.thisdiv:lt(' + currentVal + ')').show();

这会将较短的字符串'.thisdiv:lt('与变量currentVal的值以及最后的短字符串')'连接起来。

请注意,您似乎已经知道这一点,因为您在代码的以下行中使用了相同的原则:

console.log("SUBTRACTED ONE. VALUE NOW: " + (currentVal - 1));