JQuery переключаться между 3 состояниями и опубликовать вызов AJAX? - PullRequest
Новая
       44

JQuery переключаться между 3 состояниями и опубликовать вызов AJAX?

0 голосов
/ 28 февраля 2012

Мне нужно переключиться между 3 состояниями

  • состояние # 1: не выбран только серый фон
  • состояние # 2: выбранный заданный фон зеленого цвета
  • состояние # 2: кликнул снова, установил красный фон Теперь при каждом нажатии переключайтесь между красным и зеленым

Как это возможно? Помимо смены класса, мне также нужно одновременно сделать вызов ajax.

То, что я в основном хочу, это выделенный, а не выбранный переключатель и Я понятия не имею, как определить, нажал ли пользователь серое поле в первый раз

Для начала у меня теперь есть: 

<div id="test" onclick => "$(this).toggleClass('selected_yes')"> test <div>

Ответы [ 4 ]

2 голосов
/ 28 февраля 2012

Ну, вы все еще можете использовать toggle: 

$('#test').click(function() {
    if (this.className.match(/green|red/)) $(this).toggleClass('green red');
    else  $(this).toggleClass('green');

    // ajax call here
});​

http://jsfiddle.net/DRZY2/

1 голос
/ 28 февраля 2012 
$('#test').click(function() {
    var $this = $(this), clicked = $(this).hasClass('clicked');
    if (!clicked) {
        $this.addClass('clicked');
    } else {
        var isRed = $this.hasClass('red');
        $this.toggleClass('red', !isRed).toggleClass('green', isRed)
    }           
    // do ajax
})
1 голос
/ 28 февраля 2012

Если у вас есть три класса: 

.unselected { background-color: grey; }
.selected   { background-color: green; }
.clicked    { background-color: red; }

Тогда вы можете использовать их следующим образом: 

<div id="test" class="unselected">test<div>

Тогда (в document.ready или блоке скрипта после тестового элемента): 

$("#test").click(function() {
   var $this = $(this);
   if ($this.hasClass("selected")) {
      $this.removeClass("selected").addClass("clicked");
      // ajax here if needed
   } else if ($this.hasClass("clicked")) {
      $this.removeClass("clicked").addClass("selected");
      // ajax here if needed
   } else if ($this.hasClass("unselected")) {
      $this.removeClass("unselected").addClass("selected");
      // ajax here if needed
   }
});

Демо: http://jsfiddle.net/LLCMa/

Вышесказанное должно быть самоочевидным. Конечно, вы можете поместить свой Ajax-вызов вне структуры if / else, если это более уместно, но если вам нужно сделать разные Ajax-вызовы в зависимости от текущего состояния, сделайте, как указано выше.

1 голос
/ 28 февраля 2012

Вы можете попробовать это. 

$('#test').click(function(){
    var $this = $(this), state = $this.data('state') || '';
    if(state == ''){
        $this.addClass('greyBg'); 
        $this.data('state', 'unselected');   
    }
    else if(state == 'unselected'){ 
        $this.removeClass('greyBg').addClass('greenBg');
        $this.data('state', 'selected');
    }
    else if(state == 'selected'){
        $this.removeClass('greyBg greenBg').addClass('redBg');
        $this.data('state', 'clicked');
    } 
    else{
        if($this.hasClass('redBg')){
             $this.removeClass('redBg').addClass('greenBg');
        }
        else{
             $this.removeClass('greenBg').addClass('redBg');
        }

        //Here you can make ajax call now
    }

});

Каждый раз, когда вы нажимаете, я поддерживаю его состояние, используя метод jQuery data, а также выполняю требуемую логику. Я надеюсь, что это имеет смысл для вас.

Определите необходимые классы с соответствующими стилями. 

.greyBg   { background-color: grey; }
.greenBg  { background-color: green; }
.redBg    { background-color: red; }
...