Переключить и повторно переключить класс на Click, чтобы сделать симпатичный флажок - PullRequest
Новая
       12

Переключить и повторно переключить класс на Click, чтобы сделать симпатичный флажок

1 голос
/ 25 ноября 2011

Кажется, мне не нужно тратить вопрос, но я не могу заставить его работать!

Я пытаюсь сделать симпатичный флажок, используя <span> со значком фона искрытый флажок.

Мой HTML-код 

<span class="checkedBox" id="mailing_Check"></span>
<input type="checkbox" id="mailing" /> <!--(currently not hidden for testing)-->

CSS прост: 

.checkedBox { background: url('../images/iconLine.png'); background-position: -550px, 0px; display: inline-block; width: 25px; height: 25px }
.unCheckedBox { background: url('../images/iconLine.png'); background-position: -575px, 0px; display: inline-block; width: 25px; height: 25px }

Мне нужно привязать обработчик onClick к элементу checkedBox, переключать / переворачиватькласс unCheckedBox и установите флажок флажка.

Теперь у меня есть несколько длинных многословных способов сделать это, но я пытаюсь сделать это с помощью переключателя jQuery или toggleClass, и я не могу заставить его работать

Просто сейчас работаем с переворотом класса CSS ... 

$('.checkedBox, unCheckedBox').live('click', function () {
    $(this).toggleClass('checkedBox').toggleClass('checkedBox');
});

Это перевернет его один раз, но не будет связывать должным образом, когда я нажимаю второй раз, он имеетбез эффекта.

Я пытался использовать этот пример; jQuery toggle class

Но, похоже, это не сработает, а также различные другие результаты Googled, но по некоторым причинам я борюсь.

Я хочу сохранитькода до минимума, используя минимальное требование к переменным, как я уже сказал, у меня есть какой-то длинный метод с использованием логики if / else, но я решил, что jQuery должен сделать это проще!:)

Ответы [ 3 ]

1 голос
/ 25 ноября 2011

Поскольку вы изменяете одинаковые свойства стиля CSS в двух ваших правилах CSS (.checkedBox и .unCheckedBox), я думаю, что вам не нужно переключать класс .checkedbox, потому что другой просто переопределяетit.

Еще лучше, вы можете просто иметь класс, который помечает все ваши «симпатичные» флажки, а затем еще один, который изменяет стиль по умолчанию.

CSS 

.pretty-checkbox { /* default style rules */ }
.pretty-checkbox.checked { /* style rules when checked */ }

Тогда вы можете просто беспокоиться о переключении класса .checked. 

$('.pretty-checkbox').live('click', function (e) {
    $(this).toggleClass('checked');
});
1 голос
/ 25 ноября 2011

Вы пробовали 

$('.checkedBox, .unCheckedBox').live('click', function () {
    $(this).toggleClass('checkedBox unCheckedBox');//toggle the class
    $(this).next().click();//click the checkbox
});

Скрипка здесь http://jsfiddle.net/3uu2M/

0 голосов
/ 25 ноября 2011

У вас есть опечатка 

  $(this).toggleClass('checkedBox').toggleClass('unCheckedBox');

У вас есть checkedBox в списке дважды

Это может быть проще для чтения или вы можете объединить вызовы на toggleClass() и отделить их пробелом. 

  $(this).toggleClass('checkedBox unCheckedBox');

http://api.jquery.com/toggleClass/

...