Как изменить цвет кнопки при ее нажатии? - PullRequest
Новая
       0

Как изменить цвет кнопки при ее нажатии?

0 голосов
/ 09 декабря 2011

У меня есть сетка кнопок, где, если пользователь нажимает на кнопку, значение кнопки переходит в текстовое поле только для чтения. То, что я хочу, что я не могу получить, это то, что я хочу, чтобы выбранная кнопка в сетке стала зеленой, а все остальные невыбранные кнопки остались такими же, как и сейчас. Причина этого заключается в том, что если пользователь в любое время открывает сетку, он может видеть кнопку, которая в данный момент выбрана изменением цвета на кнопке. Если выбрана другая кнопка, предыдущая выбранная кнопка станет белой, а новая выбранная кнопка станет зеленой.

Кто-нибудь знает, как это сделать?

мой текущий код находится в jsfiddle. нажмите здесь

Спасибо

Ответы [ 3 ]

1 голос
/ 09 декабря 2011

Просто добавьте это: 

  $(".gridBtns").removeClass("gridBtnsOn");
  $(this).addClass("gridBtnsOn");

http://jsfiddle.net/Ksh59/7/

1 голос
/ 09 декабря 2011

Вы можете сделать, как я делал в этой скрипке http://jsfiddle.net/nicolapeluchetti/Ksh59/6/

function buttonclick(button)
{

    $('input:button').css('background-color', 'transparent');
    $(button).css('background-color', 'green');
    if (button.className=="gridBtnsOn")
    {
        button.className="gridBtnsOff";
        return false;
    }

    if (button.className=="gridBtnsOff")
    {
        button.className="gridBtnsOn";
        return false;
    }
}
0 голосов
/ 09 декабря 2011

В первую очередь используйте подписку jQuery на события. 

$(function() {
    $('#showGrid').click(function(e) {
        if ($('#optionTypeTbl').css("display") == "table") {
            $('#optionTypeTbl').hide();
        }
        else {
            $('#optionTypeTbl').css("display", "table");
        }
        e.stopPropagation();
    });

    $("body").click(function() {
        $('#optionTypeTbl').hide();   
    });

    $('#optionTypeTbl input').click(function() {

        // update value
        $('.box INPUT').val($(this).val())
        $('#optionTypeTbl').hide();

        // update ui class
        $('#optionTypeTbl input.gridBtnsOn').removeClass('gridBtnsOn').addClass('gridBtnsOff');
        $(this).addClass('gridBtnsOn');
    });

});

Код: http://jsfiddle.net/Ksh59/13/

P.S Я немного изменил стили.

...