jquery - 保持 div 处于选中状态并通过按钮更改其值

Question

我有两个 div，A 和 B。它们的数值都是 1。现在我有一个“添加”按钮。我想一次选择一个 div，然后通过单击“添加”来增加其中的值。这个怎么做？

<div id="A">1</div>
<div id="B">1</div>

<input type='button' value="ADD" id="add">

脚本

$("#add").on('click', function(){
   $(??).text($(??).text() + 1);
});

如何将“添加”按钮链接到我单击的 div，并在单击“添加”时保持选择。

Answer 1

类似于:

var $divs = $('div');
var $addButton = $("#add");

// On click on a div remove calss from eventually previous clicked div and add class to current clicked div
$divs.on('click', function () {
    var $divClicked = $(this);
    $divs.removeClass('has-been-clicked')
    $divClicked.addClass('has-been-clicked');
});

// On click on button, find previous marked div and play with it. If no div has been clicked yet, nothing happens
$addButton.on('click', function () {
    var $lastDivClicked = $divs.filter('.has-been-clicked').first();

    if ($lastDivClicked.length > 0) {
        var currentValue = parseInt($lastDivClicked.text());
        $lastDivClicked.text(++currentValue);
    }
});

演示:http://jsfiddle.net/kxMmA/7/

编辑

@user1545024:哇，你可以查看 jQuery 文档和手册...
1.没有函数.nearest()
2. ID(在您的例子中为#main)必须是unqiue。
3. 添加类 selected 时，您应该首先从同级中删除此类。
4. 您只需要一个事件处理程序，因为点击 .qty 和 .name 会将 DOM 冒泡到 #main。
5. 当使用.text()并用数字计算时，应该使用parseInt()，否则结果将附加文本，所以$(".selected").text() + 1 给出的不是数字 2，而是字符串 11。

在此处查看更新的 fiddle :http://jsfiddle.net/hdn6e/12/
和(在我看来)优化的 fiddle :http://jsfiddle.net/hdn6e/13/