Basic Jquery не работает должным образом - проверьте работоспособность, пожалуйста - PullRequest
Новая
       11

Basic Jquery не работает должным образом - проверьте работоспособность, пожалуйста

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

Я использую следующий Jquery для элементов метки, чтобы добавить или удалить класс в зависимости от его текущего состояния. 

$('label').click(function(){
if ($(this).hasClass('selected')){
    //alert('its classy');
    $(this).removeClass('selected')
} else {
    $(this).addClass('selected');
    //alert('its NOT classy');
    }
});

Насколько мне известно, он должен работать!Однако в Firefox для этого требуется двойной щелчок, а в Chrome он вообще не работает.

В настоящее время это единственный Javascript любого вида на странице, поэтому он не нарушается никакими плагинами или чем-то подобным.

Соответствующий HTML-элемент выглядит следующим образом: - 

<label class="">Filter item<input type="checkbox" /></label>

Заранее спасибо.

Ответы [ 3 ]

2 голосов
/ 05 декабря 2011

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

Вот один из способов достижения этого при разделении label и input: http://jsfiddle.net/pkuCe/

$('#cb').change(function(){
    $("label[for=cb]").toggleClass("selected", this.checked);
});

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

Почему ваш текущий подход не работает?

Из спецификаций нет ничего плохого во вложении input в тег label:

for = idref [CS]

Этот атрибут явно связывает определяемую метку с другим элементом управления.При наличии значение этого атрибута должно совпадать со значением атрибута id какого-либо другого элемента управления в том же документе. При отсутствии определяемая метка ассоциируется с содержимым элемента.

Однако, похоже, что ваша проблема связана с тем, что clickсобытие запускается дважды (таким образом сводя на нет переключение), когда у вас есть вложенный элемент input.Я не тестировал его во всех браузерах, но, похоже, это происходит в FF8.

Попробуйте щелкнуть метку в этом примере: http://jsfiddle.net/cRnJS/

Видимо, клики по элементам label вызываютсобытие click в связанном с ним input (именно поэтому проверка / снятие флажка срабатывает), и это событие всплывает вверх, что вызывает его повторный запуск в родительском label.

Выводы?

  1. Спецификации HTML, если вы можете иметь input, вложенные в label, но было бы разумно оставить их отдельно
  2. Используйтеchange событие вместо click.(примечание: вы можете иметь несколько ярлыков для каждого input)
1 голос
/ 05 декабря 2011

Я не знаю, почему это так, но вы можете решить проблему, переместив input за пределы label: 

<label for="yourCheckbox">Filter item</label>
<input type="checkbox" id="yourCheckbox" />

Вот рабочий пример .Обратите внимание, что в примере используется toggleClass, как предложено @Matt в комментарии к вашему вопросу.Я пробовал это и в Chrome, и в Firefox, и, похоже, работает нормально.

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

изменить на 

<label class="" for="FilterItem">Filter item</label>
<input id="FilterItem" type="checkbox" />
...