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

时间:2015-08-05 11:28:04

标签: javascript jquery

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

3 个答案:

答案 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的值

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

答案 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...
});

简而言之:

  1. 单击按钮时,找到按钮所在的食物细节div
  2. 。仅在该容器中查找,而不是在整个文档中使用选择器
  3. 编辑:您应该真正更改按钮上的id="Add"id="minus",ID应该在整个文档中是唯一的。您只需将addminus添加为类,然后使用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);

            }

    };

 });