javascript - jQuery 多个加/减计数器

Question

我想在我的页面上有多个加/减计数器。

我有一个工作计数器，但想让它通用，以便多个计数器可以有不同的初始值，并随着点击而增加和减少。

$('.counter-btn').click(function(e) {
    e.preventDefault();
    var $btn = $(this);
    $('.output').html(function(i, val) {
        val = val * 1 + $btn.data('inc');
        return (val <= 0 ? '' : '+') + val;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="counter-btn" id="increase1" type="button" data-inc="1">+</button>
<button class="counter-btn" id="decrease1" type="button" data-inc="-1">-</button>
<div class="output">+30</div>

<hr />


<button class="counter-btn" id="increase1" type="button" data-inc="1">+</button>
<button class="counter-btn" id="decrease1" type="button" data-inc="-1">-</button>
<div class="output">+30</div>

fiddle 链接: http://jsfiddle.net/u2Lh7dbp/

谢谢

Answer 1

每个输出元素都应该是唯一的，这样它就可以被自己调用。

$('.counter-btn').click(function(e) {
        e.preventDefault();
        var $btn = $(this);
        $('#output-' + $btn.data('index')).html(function(i, val) {
            val = val * 1 + $btn.data('inc');
            return (val <= 0 ? '' : '+') + val;
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="counter-btn" id="increase1" type="button" data-index="1" data-inc="1">+</button>
<button class="counter-btn" id="decrease1" type="button" data-index="1" data-inc="-1">-</button>
<div class="output" id="output-1">+30</div>

<hr />

<button class="counter-btn" id="increase2" type="button" data-index="2" data-inc="1">+</button>
<button class="counter-btn" id="decrease2" type="button" data-index="2" data-inc="-1">-</button>
<div class="output" id="output-2">+30</div>

我添加了一个新的数据属性:index。您可以使用该索引通过其 ID 指定您要查找的确切输出元素。