Подтвердить что ты не робот

Использование jQuery для добавления атрибута класса к изображениям и т.д. На странице?

Помогите? Извиняюсь заранее из-за моего статуса jQuery.noob, но я рисую пустой и из идей о том, почему это не работает. Может, кто-то здесь может что-то увидеть, а я нет? Я бы очень благодарен за помощь.

Проблема

На этой веб-странице есть несколько изображений на ней (также абзацы и т.д.), в которые я хочу добавить класс. В настоящее время у них нет класса.

Почему я хочу добавить класс

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

Как я пытаюсь сделать это

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $("img").addClass("menumain");
                   alert("Here I am!"); //This alert will go when I figure this out, I just added it to see if it pops up (it does).
    });
</script>

Я также пробовал это так (Примечание: все мои изображения содержат строку "menumain-" в именах файлов)

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $("img[src*=menumain-]").attr({class:"menumain"});

    });
</script>

Итак, что происходит, когда я пытаюсь?

Ничего. Я загружаю страницу (это предупреждение появляется, которое я увольняю), затем расширяем тело с помощью firebug и/или инструментов разработчика Safari и т.д. И переходим к изображениям на странице. Я вижу атрибуты изображения, но я не вижу, где был добавлен класс, гораздо меньше определяемый как "menumain", который является тем, кем я хочу, чтобы класс был.

Часть того, почему это водит меня Crazy

У меня есть еще один jQuery script на той же странице, который делает что-то подобное. Он добавляет атрибуты, а не атрибут Class, а другие атрибуты основного Div, которые окружают всю страницу. У меня нет никаких проблем с этой функцией jQuery, поэтому я не понимаю, почему этот файл не работает.

Почему он не может работать

Я проверил синтаксис 9 способов с воскресенья, но я не вижу ничего плохого. Тем не менее, вы знаете, как синтаксис проверки чтения может быть.

Во-вторых, изображения, на которые я нацеливаюсь (я также пытаюсь получить текст и кнопки в меню, помеченном в этом же классе), засыпаются в Divs следующим образом:

<div id="image194" style="visibility: inherit;">
     <a name="image194anc">
          <img width="317" height="564" border="0" alt="menumain-bg-317x564"    src="images/menumain-bg-317x564.png" name="image194Img">
     </a>
</div>

Я предполагаю, что мой таргетинг на $( "img [src= menumain -]" ) * найдет эти изображения независимо от того, находятся ли они в Div или нет, но возможно я ошибаюсь в этом?

Еще одна вещь

Эта "веб-страница" создается приложением Lectora от Trivantis. Это средство разработки WYSIWYG для инструкторов (которые НЕ являются веб-разработчиками), которые создают онлайн-обучение. Так что это не так, как будто я создаю все это в DreamWeaver или могу изменить весь подход к веб-дизайну. Но я должен был бы поместить класс в набор элементов страницы и направить их на CSS, нет?

Скажите, пожалуйста, если вы видите что-то не так. Здесь версия страницы → http://bit.ly/Rijnl8

4b9b3361

ОТВЕТЫ

Ответ 1

jQuery имеет встроенный метод добавления классов.

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("img[src*=menumain-]").addClass("menumain");

    });
</script>

http://api.jquery.com/addClass

Ответ 2

Вы можете поместить изображения, которые хотите стилизовать в контейнерах div, затем выполните

$('.container').addClass('yourClass');

то в классе используйте

.yourClass img {}

чтобы стилизовать все изображения в этих контейнерах. Это обходной путь, но он должен исправить вашу проблему! Кроме того, в HTML5 использование type="text/javascript" в тегах <script> больше не требуется.

Ответ 3

Просто нужно было сделать это в приложении, которое я построил. Вы поступаете правильно, но вы недостаточно далеко. Добавьте значение, когда вы используете функцию .attr:

$('.category').attr('theAttributeHere','theAttributeValueHere');

Ответ 4

Это похоже на то, что вы хотите http://jsfiddle.net/dstarh/Kxfg7/1/

Добавьте класс к каждому изображению на странице

Ответ 5

В Lectora 11 вы можете добавлять классы к любым объектам. Выберите объект (ы) > вкладка Пропеть > Раздел "Внешний вид" > Нажмите маленькую стрелку в углу.