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

Question

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 是一个有效数字。

Answer 1

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

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

这将较短的字符串 '.thisdiv:lt(' 与变量 currentVal 的值和短字符串 ')' 最后。

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

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