Почему следующая функция Toggle выполняет четыре разные операции вместо двух?

Question

Вы можете увидеть реализацию здесь: http://jsfiddle.net/BMWZd/8/

Что я пытаюсь сделать, когда вы нажимаете «Джон Браун», вы видите, что первый элемент сверху становится черным. Когда вы нажимаете на нее снова, граница пунктирного круга исчезает, затем, когда вы снова нажимаете «Джон Браун», вы видите что-то еще, и, наконец, еще раз все это исчезает.

То, чего я пытаюсь достичь, это когда вы нажимаете на него один раз, все становится черным (как сейчас), затем вы нажимаете на него снова, все исчезает и возвращается в исходное состояние.

Важное различие, что я имею в виду ... когда одно из имен в поле не щелкнуло. Так что, если вы нажали «Джон Браун», а затем перешли к Джеку Дорси, № 1 вверху должен остаться черным. Но если вы снова нажмете на Джека Дорси, то есть вы «отцепите» его, он должен исчезнуть.

Кроме того, как мне затянуть его, чтобы он быстрее реагировал. Теперь, когда вы нажимаете на нее, создается впечатление, что между моментом нажатия и моментом отклика существует небольшая задержка.

Edit1: Если кому-то интересно ... Пользовательский интерфейс, в котором это будет использоваться, предназначен для моего веб-приложения - http://www.compversions.com

Answer 1

http://jsfiddle.net/timmywil/BMWZd/23/ Я сделал только шаги один и два.Я уверен, что вы можете взять его оттуда.

Answer 2

Первая функция переключения запускает каждый второй щелчок, поэтому вы добавляете / удаляете .dash-elem-selected и .bc-dotted-to-solid каждый второй щелчок. Два .dash-elem-selected, за которыми следуют два выкл, плюс сплошные / пунктирные границы, каждый второй щелчок дает вам четыре состояния. Поскольку вы уже используете отдельные функции, один из них должен добавить классы (т.е. установить состояние «включено»), а другой удалить их (т.е. установить состояние «выключено»).

$(document).ready(function() {
    $('#panels tr table tr').toggle(function () {
        var $this = $(this),
            tr_class = 'dash-elem-selected';
        if (!$this.parent('thead').length) {
            $this.addClass(tr_class).siblings().removeClass(tr_class);
            var idx = $.trim($this.parents('td table').siblings('.sit-in-the-corner').text());
            var spans = $('#bc' + idx + ' span');
            spans.addClass('bc-dotted-to-solid');
            spans.filter('.dashed-circle').css({ 'border' : '5px solid #000'});
        }
    }, function() {
        var $this = $(this);
        var idx = $.trim($this.parents('td table').siblings('.sit-in-the-corner').text());
        var spans = $('#bc' + idx + ' span');
        spans.removeClass('bc-dotted-to-solid');
        spans.filter('.dashed-circle').css({ 'border' : '5px dotted #bdbebf' });
    });
});

Классу .dash-elem-selected требуется color: black (или что-то подобное, но это соответствует остальной части дизайна), чтобы показать, что был выбран определенный элемент.