2

我的 HTML 中有以下 div 集合。它旨在根据用户交互动态复制。

 <div class="bill-item">
<!-- Section for a single item -->
<div class="bill-item-img">
<!-- Section for Item pic -->
</div>
<div class="bill-item-description">
<!-- Section for Item description and pricing -->
<div class="bill-item-name">
<p class="bill-item-name-left">Normal Cofee</p><p class="bill-item-name-right">170.00</p>
<div class="clear"></div>
</div>
<div class="bill-item-price">
<span>170.00 USD</span>
</div>
    <div class="bill-item-amount">
<span>2</span>
</div>
</div>
<div class="bill-amount-selection">
<!-- Section where the increment & decrement of item amount goes -->
<a class="amount-increase" href="#"></a>
<a class="amount-decrease" href="#"></a>
</div>
</div>

这是元素的 HTML 渲染图像。

页

我编写了以下脚本来增加 bill-item-amount 跨度值。

 $(".amount-increase").click(function(){
            x+=1;
            $(".bill-item-amount span").html(x);
        });

        $(".amount-decrease").click(function(){
            if(!x<=0){
                x-=1;
                $(".bill-item-amount span").html(x);
            }
        });

这很好用，但是它更新了两个 span 元素的值。我想要的是捕捉单击元素的事件（我现在这样做）并增加相应跨度的跨度值。如何过滤掉使用 javascript 更新的跨度。？

4

5 回答 5

2

类似的东西$(this).parents('.bill-item').find('.bill-item-amount span')应该选择正确的元素。
在您的回调内部this分配给eventSource.

于 2013-04-09T09:10:13.763 回答
1

您应该从单击的元素向上遍历 dom 树，直到到达.bill-item元素并向下到达.bill-item-amount span节点

$(".amount-increase").click(function(){
    var $span = $(this).parent().parent().find(".bill-item-amount span");
    var x = $span.html();
    x+=1;
    $span.html(x);
});

$(".amount-decrease").click(function(){
    var $span = $(this).parent().parent().find(".bill-item-amount span");
    var x = $span.html();
    if(!x<=0){
         x-=1;
        $span.html(x);
    }
});
于 2013-04-09T09:09:23.457 回答
0

嗨 dimal 更新您的代码：

$(".amount-increase").click(function(){
        x+=1;
        $(".bill-item-amount").html(x);
    });

    $(".amount-decrease").click(function(){
        if(!x<=0){
            x-=1;
            $(".bill-item-amount").html(x);
        }
    });

不要在选择器内添加跨度[它会更改整个跨度值]

于 2013-04-09T09:14:59.107 回答
0 
 $(".amount-increase").click(function(){
        x+=1;
        $("use ur increase span id here").html(x); //
    });

    $(".amount-decrease").click(function(){
        if(!x<=0){
            x-=1;
            $("use ur decrease span id here").html(x);
        }
    });
于 2013-04-09T09:19:00.637 回答
0

在每个函数中，选择器$(".bill-item-amount span")将找到<span>文档中的所有金额。您可以使用 jQuery 或纯 JavaScript遍历 DOM以找到正确的。<span>您似乎正在使用 jQuery 函数，所以我的回答也使用 jQuery。

下面的代码将这两个动作组合成一个函数，根据<a>点击的类名增加或减少数量。我还添加了一个return false，以便浏览器不会跟随锚点上的href="#" 。

$('.bill-amount-selection').on('click', 'a', function(){
    var change = this.className == 'amount-increase' ? 1 : -1
    var $amount = $(this).closest('.bill-item').find('.bill-item-amount span')
    var amount = parseInt($amount.html(), 10) + change
    $amount.html(amount < 0 ? 0 : amount)
    return false
});

的使用.on()意味着需要 jQuery v1.7+。如有必要，我可以提供与较低 jQuery 版本兼容的功能。

于 2013-04-09T09:29:09.310 回答