Question

您好我正在尝试制作一个项目列表，我为每个项目添加了“添加”和“减号”按钮。问题是我的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);
        }
    };
});

Answer 1

$('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的值

https://jsfiddle.net/s2u9eb36/参考此

Answer 2

由于你的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...
});

简而言之：

单击按钮时，找到按钮所在的食物细节div
。仅在该容器中查找，而不是在整个文档中使用选择器

编辑：您应该真正更改按钮上的id="Add"和id="minus"，ID应该在整个文档中是唯一的。您只需将add或minus添加为类，然后使用element.hasClass('add')进行检查。

Answer 3

不要在同一页面上使用多个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);

            }

    };

 });

如何使JS代码不影响其他DIV？

3 个答案: