我正在尝试创建一个网站的简单部分,允许用户加上或减去一个按钮来显示或删除更多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是有效数字也不会。
答案 0 :(得分:1)
$('.thisdiv:lt(currentVal)').show();
根本不使用变量currentVal
,它只是将文字文本'currentVal'
作为选择字符串的一部分。试试这个:
$('.thisdiv:lt(' + currentVal + ')').show();
这会将较短的字符串'.thisdiv:lt('
与变量currentVal
的值以及最后的短字符串')'
连接起来。
请注意,您似乎已经知道这一点,因为您在代码的以下行中使用了相同的原则:
console.log("SUBTRACTED ONE. VALUE NOW: " + (currentVal - 1));