在jQuery中，将一组按钮中被点击的按钮的值切换

Question

我正在尝试使用asp.net mvc 4和jQuery 1.9.1制作一个网站，其中我想在文本框中插入布尔值(Y或N)以对应按下的按钮。它适用于单个按钮，但对于一组按钮不起作用。以下是我的代码：

$(document).ready(function () {
    var isClicked = 0;
    $('.btn').click(function () {
        if (isClicked == 0) {
            isClicked = 1;
            $(this).toggleClass('color-blue color-green');
            $(this).next('.assignCheck').val('Y');
        } else if (isClicked == 1) {
            isClicked = 0;
            $(this).toggleClass('color-green color-blue');
            $(this).next('.assignCheck').val('N');
        }
    });
});

JSFiddle演示

如何使按钮单独工作？非常需要帮助。谢谢。

- Shihan Khan

Answer 1

您可以在按钮中使用 data- 属性来存储其点击值是否为1或零，并使用该值来更新相应的文本框。

演示

Html

<button class="btn color-blue" data-clicked="0">ONE</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">TWO</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">THREE</button>
<input type="text" class="assignCheck" />

JQuery

$(document).ready(function () {        
    $('.btn').click(function () {
        var isClicked = $(this).data("clicked");        
        if (isClicked == 0) {
            isClicked = 1;
            $(this).toggleClass('color-blue color-green');
            $(this).next('.assignCheck').val('Y');
        } else if (isClicked == 1) {
            isClicked = 0;
            $(this).toggleClass('color-green color-blue');
            $(this).next('.assignCheck').val('N');
        }
        $(this).data("clicked", isClicked);
    });
})

- Adil

---

感谢您的回复。但是，您能提供一些代码让我更好地理解吗？ - Shihan Khan

太棒了。运行顺畅。谢谢。 :) - Shihan Khan