javascript - jquery中按钮组中单击按钮的切换值

Question

我正在尝试使用 asp.net mvc 4 和 jQuery 1.9.1 创建一个网站，我想在其中插入 bool 值 (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 Demo

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

Answer 1

u如果按钮的点击值为 1 或零，您可以使用 data- 属性来存储，并使用该值更新相应的文本框

Live Demo

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