javascript - 为什么在JS中将变量识别为数字？

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替换为实数，它将显示该数字
但这并不是我想要的那样动态。为什么currentVal不起作用？
此处的示例在$('.thisdiv:lt(2)').show();下有效，而$('.thisdiv:lt(currentVal)').show();无效，即使currentVal是有效数字。

最佳答案

$('.thisdiv:lt(currentVal)').show();根本不使用变量currentVal，它只是文字文本'currentVal'作为选择器字符串的一部分。尝试以下方法：

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

这会将较短的字符串'.thisdiv:lt('与变量currentVal的值连接在一起，并在末尾将较短的字符串')'连接起来。

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

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