Проблема с Jquery addClass

#javascript #jquery #html #addclass

#javascript #jquery #HTML #addclass

Вопрос:

У меня возникли проблемы с реализацией эффекта jQuery .addClass() .

Скрипт, который я пытаюсь использовать, выглядит следующим образом:

 <script>
    $(function(){   
        $('#top_right_size_large').click(function(){
            $('#primary').addClass('large_content');
        });
    });
    </script>

Я просмотрел документацию и проверил все свои скобки, но по какой-то причине это не добавляет .класс large_content при нажатии на привязку #top_right_size_large. Есть идеи, почему это не сработает так, как я ожидаю?

1. Откуда вы знаете, что он не добавлен? Вы посмотрели на DOM? Существуют ли элементы с идентификатором primary или top_right_size_large ? Ваш код работает нормально: jsfiddle.net/fkling/wcTz5 поэтому я предполагаю, что ваш HTML неверен или добавление класса просто визуально ничего не меняет.

2. Да, все они существуют — здесь нет никаких опечаток. Я знаю, что он не добавляется, потому что я смотрю с помощью firebug. Кроме того, не применяется ни один из стилей, связанных с этим классом.

3. Смотрите мою правку. Ваш код работает нормально: jsfiddle.net/fkling/wcTz5 Не могли бы вы предоставить ссылку на страницу? Или опубликовать HTML?

Ответ №1:

Просто предположение, у вашего якоря есть href, и при нажатии он перезагружает страницу, попробуйте изменить код, как показано ниже:

 <script>
    $(function(){   
        $('#top_right_size_large').click(function(e) {
            e.preventDefault();
            $('#primary').addClass('large_content');
        });
    });
</script>

1. Это хорошая догадка, я всегда забываю изменить href.

2. @Thomas: Еще лучше: если вы не используете ссылку как ссылку, то есть она не ссылается на другой сайт, используйте кнопку.

Ответ №2:

Очевидно, что при добавлении кода перед тегом скрипт не будет работать. Я переместил код под тегом, и все работает нормально. Спасибо за все предложения!

1. Это должно сработать, потому что вы передаете обратный вызов document.ready событию. Т.е. код запускается после загрузки DOM. Или, может быть, это не тот код, который у вас есть? В моем примере jsfiddle вы можете видеть, что код добавлен в начало страницы (то есть перед элементами), и это работает.

2. Я не использовал document.ready — вот почему его нужно было загрузить после содержимого. Спасибо, что помогли мне устранить это.

3. Ну, в вашем коде вы делаете. $(function(){...}) является сокращением для $(document).ready(function(){...}) . Но в любом случае….

Ответ №3:

Включите javascript:void(0); в свой href , чтобы предотвратить любую навигацию

 <a id="op_right_size_large" href="JAVASCRIPT:VOID(0);">..</a>