Переключение статусов на jquery?

Question

[lavezzi1]

Здравствуйте!
Как элегантно реализовать переключение статусов в таск менеджере?
Логика:
У задачи есть три статуса - активаная, завершенная, отложенная.

Нужно реализовать переключение статусов туда-обратно.

Я новичок в js и пока получилось написать вот так.

var taskActive = $('<div class="taskActive"><span>Active</span></div>'),
    taskStop = $('<div class="taskStop"><span>Stop</span></div>'),
    taskDone = $('<div class="taskDone"><span>Done</span></div>');

$('.to-done').click(function(){
  $('.taskDone').replaceWith(taskActive);
});

Я понимаю что этот код хрень полная, потому что не понятно как определять что статус например актив или стоп.

Также проблема в том, что статусы не toggleяться.

Помогите пожалуйста понять как решать такие задачи.

Answer 1

[HoHsi]

<div class="task-status task-active selected">Active</div>
<div class="task-status task-stop">Stop</div>
<div class="task-status task-done">Done</div>

// 1, и самое главное, не вызывайте по многу раз функции, это б** самое медленное место в JS.
// Вы сделали правильно, а вот предыдущий ответчик, увы.

// 2. Кложурка - наше все. ()()
;(function($){
    // Выполнится, только после прогрузки страницы
    $(function{
        var $taskStatus = $('.task-status'); // Доллар как бы показывает, что это JQ объект

        // 3. В HTML можно убрать selected, что-бы код смотрелся гармончнее
        // Тогда следуте добавть
        /*
        $taskStatus.first().addClass('selected');
         */

        $taskStatus.on('click', function(){
            var $this = $(this);

            // Зачем, что-то менять если это и так уже `selected`
            if(!$this.hasClass('selected')){
                var $other = $taskStatus.not( $this );

                // Тем самымы, даже при малом FPS, не будет мерцания
                $this.addClass('selected');
                $other.removeClass('selected');
            };
        });
    });
})(jQuery);

И как всегда, минутка рекламы CoffeeScript

do ($ = jQuery)->
    $ ->
        $taskStatus = $('.task-status')

        $taskStatus.on 'click', ->
            $this = $(this)

            unless $this.hasClass('selected')
                $other = $taskStatus.not( $this )

                $this.addClass('selected')
                $other.removeClass('selected')

Comments

[HoHsi]

И да, на будущее, $ - для JS это валидный символ переменной, как (a-z 0-9). Т.е. это не какая-то магия, JQ и прочее, это просто функция так называется. Все равно, что назвать функцию `a` или `b`

[Родион Мещеряков]

Все ок, только не понял этого пассажа:
"// 1, и самое главное, не вызывайте по многу раз функции, это б** самое медленное место в JS.
// Вы сделали правильно, а вот предыдущий ответчик, увы."

Вопрошающему:
всегда лучше работать с CSS, чем с DOM. Это работает гораздо быстрее. Поэтому вместо того, чтобы постоянно заменять один элемент другим, лучше просто скрывать ненужные элементы при помощи CSS-классов. Что и продемонстрировали ответчики.

[HoHsi]

Родион Мещеряков: в моем ответе, так и сделано.

[lavezzi1]

Спасибо конечно, но ни то ни другое решение не подошло. Принцип под мои задачи не подходит. Адаптировать не смог. Продолжаю поиски

[HoHsi]

lavezzi1: а в чем проблема то? Просто в CSS делаете всем display: none; А `selected` - Display: block

[Родион Мещеряков]

HoHsi: Да, я знаю. Я просто попытался объяснить вопрошающему суть решения

[lavezzi1]

HoHsi: Я понял что вы реализовали и как это должно работать. У меня ситуация такая -
Объясню условно без привязки к определенным состояниям.
Если статус А то переводить его в B
Если статус B то переводить его в С
Если статус C то переводить его в B

Переводить нужно посредством выбора соответствующего пункта в выпадающем меню. Типа Перевести в B.

[lavezzi1]

HoHsi: Отсюда вопросы: Как проверять какой статус есть у таска, Если А то переводить в B например. Тупо класс selected тут уже не спасет

[HoHsi]

Родион Мещеряков: А, пардон. Что касается вызова функции - это самое затратное место JS (Ассемблер, все дела). Особенно если это функция связана с DOM деревом.

[Родион Мещеряков]

lavezzi1: Можно посмотреть как это реализовано здесь https://github.com/tastejs/todomvc/tree/gh-pages/e... Тут, правда, два состояния (активно/выполнено), но я думаю, что добавить третье состояние по аналогии не проблема.

Answer 2

[IceJOKER]

на странице три div-a

<div class="task-status task-active selected">Active</div> //selected - активный статус
<div class="task-status  task-stop">Stop</div>
<div class="task-status  task-done">Done</div>

$('.task-status').click(function(){
  $('.task-status').removeClass('selected'); //сначала убираем, можно явно найти с классом selected или просто у всех убрать
  var el = $(this); //для удобства
  if(!el.hasClass('selected')){ //если не имеет класса selected
    el.addClass('selected'); //добавляем его
  }
});

Дальше уже