您好我正在尝试制作一个项目列表,我为每个项目添加了“添加”和“减号”按钮。问题是我的JS代码控制了两个项目。恩。如果我点击item1的“添加”,那么也会添加item2。
看起来我的JS函数适用于所有按钮元素。因此,当我单击“按钮”元素时,所有按钮都会被触发。
如何单独添加它们?
PS:我想我需要做一些类似JS的特定ID来触发。我的想法是为每个ID添加一个唯一的ITEM ID并触发该特定ID下的按钮,以便其他ITEM ID下的其他按钮不会被触发。
这是我的HTML代码:
<div class="row bb">
<div class="col-xs-12 food-container">
<a href="#"><img src="img/1.png" class="min-w img-responsive" /></a>
<div class="food-detail">
<div class="food-name">test</div>
<div class="food-sales">test:233333</div>
<div class="food-price">
¥50
<div class="food-edit">
<button class="btn btn-info" value="50.55" id="minus">-</button>
<span class="num-sales"></span>
<button class="btn btn-info" value="50.55" id="add">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row bb">
<div class="col-xs-12 food-container">
<a href="#"><img src="img/1.png" class="min-w img-responsive" /></a>
<div class="food-detail">
<div class="food-name">test</div>
<div class="food-sales">test:233333</div>
<div class="food-price">
¥50
<div class="food-edit">
<button class="btn btn-info" value="50.55" id="minus">-</button>
<span class="num-sales"></span>
<button class="btn btn-info" value="50.55" id="add">+</button>
</div>
</div>
</div>
</div>
</div>
这是我的JS:
var theTotal = 0;
var theSales = 0;
var minusButton = document.getElementById('minus');
if (theSales == 0) {
$(minusButton).hide();
}
$('button').click(function () {
var ID = this.id;
if (ID == "add") {
$(minusButton).show();
theTotal = Number(theTotal) + Number($(this).val());
theSales++;
var num = theTotal.toFixed(2);
$('.total').text("¥" + num);
$('.total-num-of-sales').text(theSales + "份");
$('.num-sales').text(theSales);
};
if (ID == "minus") {
theTotal = Number(theTotal) - Number($(this).val());
theSales--;
var num = theTotal.toFixed(2);
if ( theSales == 0 ) {
$('.total').text("");
$('.total-num-of-sales').text("");
$('.num-sales').text("");
$(minusButton).hide();
}
else if ( theSales > 0 ) {
$('.total').text("¥"+num);
$('.total-num-of-sales').text(theSales + "份");
$('.num-sales').text(theSales);
}
};
});
答案 0 :(得分:0)
$('button').click(function(){
var ID = this.id;
if (ID == "add") {
$(minusButton).show();
theTotal = Number(theTotal) + Number($(this).val());
theSales = Number($(this).parent().find('.num-sales').text())+1;
var num=theTotal.toFixed(2);
$('.total').text("¥"+num);
$('.total-num-of-sales').text(theSales+"份");
$(this).parent().find('.num-sales').text(theSales);
};
if (ID == "minus") {
theTotal = Number(theTotal) - Number($(this).val());
theSales = Number($(this).parent().find('.num-sales').text())-1;
var num=theTotal.toFixed(2);
if ( theSales == 0) {
$('.total').text("");
$('.total-num-of-sales').text("");
$(this).parent().find('.num-sales').text("");
//$('.num-sales').text("");
$(minusButton).hide();
}
else if ( theSales > 0) {
$('.total').text("¥"+num);
$('.total-num-of-sales').text(theSales + "份");
$(this).parent().find('.num-sales').text(theSales);
//$('.num-sales').text(theSales);
}
};
$(本).parent()找到(” NUM销售。)文本(theSales)。 通过这种方式,您可以获得单击按钮的父级并更改所选父级的.num-sales的值
答案 1 :(得分:0)
由于你的id和类选择器,你正在混合元素。
当你通过类的jQuery选择元素时(比如$('.num-sales')
),jQuery会为你提供所有符合选择器的元素的集合。在您的情况下,这将是class="num-sales"
个元素。
每当你调用一个函数(如.html(theSales)
)时,它会将该函数应用于集合中的每个元素,这就是你的代码影响多个元素的原因。
您需要找到一种方法来区分另一个元素。这里有很多选项,但我喜欢通过限制我的选择器的范围来做到这一点。有了这个,我的意思是我首先找到包含被点击元素的food-detail
div,然后只在该元素中找到.num-sales
等...
然后,您可以在按钮点击中执行以下操作:
$('button').click(function(){
var ID = this.id;
var element = $(this) //make a jQuery object of the clicked button
// finds the first parent element with class food-detail
var container = element.closest('.food-detail');
// find .num-sales within container
var numSales = container.find('.num-sales')
// continue...
});
简而言之:
编辑:您应该真正更改按钮上的id="Add"
和id="minus"
,ID应该在整个文档中是唯一的。您只需将add
或minus
添加为类,然后使用element.hasClass('add')
进行检查。
答案 2 :(得分:0)
不要在同一页面上使用多个ID
http://jsfiddle.net/bjc1c9tr/4/
检查这会对你有所帮助
boxplot(data$var)
html(添加新课程)
var theTotal = 0;
var theSales = 0;
var minusButton = $('.minus');
if (theSales == 0) {
$(minusButton).hide();
}
$('button').click(function(){
var ID = $(this).attr('data');
if (ID == "add") {
$(this).parent().find('.minus').show();
theTotal = Number($(this).parent().find('.num-sales').text()) + Number($(this).val());
theSales = Number($(this).parent().find('.num-sales').text()) + Number(1);
var num=theTotal.toFixed(2);
$(this).parent().find('.total').text("¥"+num);
$(this).parent().find('.total-num-of-sales').text(theSales+"份");
$(this).parent().find('.num-sales').text(theSales);
};
if (ID == "minus") {
theTotal = Number($(this).parent().find('.num-sales').text()) - Number($(this).val());
theSales= Number($(this).parent().find('.num-sales').text()) - Number(1);
var num=theTotal.toFixed(2);
if ( theSales == 0) {
$('.total').text("");
$(this).parent().find('.total-num-of-sales').text("");
$(this).parent().find('.num-sales').text("");
$(this).parent().find('.minus').hide();
}
else if ( theSales > 0) {
$(this).parent().find('.total').text("¥"+num);
$(this).parent().find('.total-num-of-sales').text(theSales + "份")
$(this).parent().find('.num-sales').text(theSales);
}
};
});