Question

我的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呈现图像。

page

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

 $(".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过滤掉要更新的范围。？

Answer 1

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

Answer 2

您应该从点击的元素向上走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);
    }
});

Answer 3

您好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);
        }
    });

不要在选择器中添加span [它会改变整个范围值]

Answer 4

 $(".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);
        }
    });

Answer 5

在每个函数中，选择器$(".bill-item-amount span")将在文档中找到所有<span>金额。您可以遍历DOM 以使用jQuery或纯JavaScript找到正确的<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版本的兼容功能。

过滤掉要更新的跨度

5 个答案: