использование addClass или toggleClass с JQuery внутри метода щелчка не работает?ошибка? - PullRequest
Новая
       48

использование addClass или toggleClass с JQuery внутри метода щелчка не работает?ошибка?

2 голосов
/ 04 марта 2012

Это кажется очень простым ... и все же это не работает правильно.

У меня получится, если вы поставите класс .normal выше .hightlight ... но я не изменяю стиль здесь .. только позиция. Это не имеет никакого смысла ..

Кажется, я не могу вставить сюда HTML-код, поэтому я должен делать это блоками. И я вложил снимок всего кода.

Убедитесь, что у вас есть пустая HTML-страница. Тип документа не имеет значения .. Я тестировал его на разных типах, но он все еще не работает правильно.

Это внутри блока стилей после заголовка

* * 1010

после этого у меня есть скрипт-тег с источником последнего кода jquery http://code.jquery.com/jquery-latest.min.js

И после этого блок сценариев и здесь идет: 

$(document).ready(function () {
  $('#maindiv').css('cursor', 'pointer');
  $('#maindiv').click(function () {
    //alert("click");
   // $(this).toggleClass("highlight"); //this does not work!
   // $(this).addClass('highlight'); //this does not work!

   // $(this).attr("class", "highlight"); //this works
   // $(this).css("background", "yellow"); this works

    // the javascript way to do this works also fine.
    // var element = document.getElementById('maindiv');
    // element.setAttribute("class", "highlight");
});

});

А внутри тела тег p с идентификатором "maindiv" и классом "normal"

с текстом нажмите здесь.

Ок, я не могу дождаться, пока кто-нибудь попробует это тоже ... это безумие, потому что все остальные способ работы. Но только .addClass и .toggleClass не работают правильно

Поскольку я новый пользователь, я не могу приложить снимок полного кода здесь, но вы можете скачать его по адресу: http://www.bckan.nl/temp/jquerybug.jpg

Ответы [ 2 ]

2 голосов
/ 04 марта 2012

Попробуйте: 

$(document).ready(function () {
    $('#maindiv').css('cursor', 'pointer');
    $('#maindiv').on('click', function() {
        $(this).toggleClass("highlight").toggleClass('normal');
    });
});

Не пробовал ваш код, но я предполагаю, что он добавляет класс нормально, но, поскольку вы никогда не удаляете "нормальный" класс, CSS не будет перезаписан.

Кроме того, для оптимизации старайтесь сохранять минимальные значения .css в своем javascript. установка курсора maindivs на указатель может быть легко установлена ​​в файле .css. И избегайте .click / .live / .bind и т. Д., Они устарели и все они ссылаются на новую функцию .on. Так что просто используйте .on напрямую.

О, и добавление! Imporant в вашем css сработает, но это также то, чего вы должны стараться избегать, насколько это возможно, просто вам будет сложнее позже.

2 голосов
/ 04 марта 2012

Как следует из названия, addClass и toggleClass просто добавляют класс, что означает, что у вашего элемента все еще есть .normal, который может иметь более высокий приоритет, чем .highlight, и, следовательно, ваши изменения цвета не применяются.Проверьте DOM, и вы увидите, что класс добавлен.Попробуйте заменить .normal на .highlight вместо того, чтобы просто добавить .highlight или поместить .normal поверх .highlight в своем CSS.Вы также можете добавить! Важное к свойствам .highlight, но это не рекомендуется.

...