Проблемы с addClass в jQuery

ProgramBox

Проблемы с addClass в jQuery

Post author:admin
Запись опубликована:13 мая, 2023
Post category:Вопросы по программированию

#jquery #ruby-on-rails #addclass

Вопрос:

У меня проблемы с селекторами в jQuery. Или (что я не думаю) с моим кодом jQuery.

Позвольте мне рассказать о моей проблеме. У меня есть проект Rails, и я хочу вставить в свое меню класс «active», если текущая страница в меню такая же.

Например:

Текущая страница: Публикует мое меню:

Страницы (класс: отсутствует)
Пользователи (класс: нет)
Сообщения (класс: «активный»)
Блаблабла …

Мой HTML-код / Rails / jQuery (если вы разработчик Rails, это мой макет):

Меню:

 <ul id="nav">
  <li id="dashboard"><%= link_to "Dashboard", admin_index_path %></li>
  <li id="notes"><%= link_to "Notes", admin_notes_path %>
   <ul>
    <li><a href="#">List notes</a></li>
    <li><a href="#">Add note</a></li>
   </ul>
  </li>
  <li id="projects"><a href="#">Projects</a>
   <ul>
    <li><a href="#">List projects</a></li>
    <li><a href="#">Add project</a></li>
   </ul>
  </li>
  <li id="users"><a href="#">Users</a></li>
</ul>

Скрипт:

 <script>
 $("#hld #wrapper #header #nav li").addClass(function() {
   var addedClass;

   if ($(this).attr('id') === "<%= content_for(:title).downcase %>") {
    return "active";
   }

   return addedClass;
 });
</script>

<!--[if IE]><script type="text/javascript" src="/assets/excanvas.js"></script><![endif]-->  
<script type="text/javascript" src="/assets/jquery.js"></script>
<script type="text/javascript" src="/assets/jquery.img.preload.js"></script>
<script type="text/javascript" src="/assets/jquery.filestyle.mini.js"></script>
<script type="text/javascript" src="/assets/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="/assets/jquery.date_input.pack.js"></script>
<script type="text/javascript" src="/assets/facebox.js"></script>
<script type="text/javascript" src="/assets/jquery.visualize.js"></script>
<script type="text/javascript" src="/assets/jquery.visualize.tooltip.js"></script>
<script type="text/javascript" src="/assets/jquery.select_skin.js"></script>
<script type="text/javascript" src="/assets/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/assets/ajaxupload.js"></script>
<script type="text/javascript" src="/assets/jquery.pngfix.js"></script>
<script type="text/javascript" src="/assets/custom.js"></script>

Найдите скрипт, и там, конечно, будет мой скрипт на jQuery.
Итак, в чем проблема?

Спасибо за помощь, я пытался быть понятным. Лукас Морейра.

1. Можете ли вы показать нам фактически сгенерированную страницу, чтобы мы могли видеть реальный javascript, а не страницу Rails перед обработкой. Например, я понятия не имею, во что это на самом деле превращается: "<%= content_for(:title).downcase %>" .

2. Кроме того, есть ли какая-либо причина, по которой вы используете: #hld #wrapper #header #nav li вместо просто #nav li в качестве селектора. Идентификаторы уникальны на странице, поэтому вам не нужно использовать несколько идентификаторов в селекторе для назначения одного.

3. Я сделал то, что вы сказали (изменил ‘#hld #wrapper #header #nav li’ на ‘#nav li’) и все еще не работает.

4. Кроме того, когда я захожу на сайт, я просматриваю исходный код: ‘<script> $(«#nav li»).addClass(function() { var addedClass; if ($(this).attr(‘id’) === «dashboard») { возвращает «active»; } возвращает addedClass; }); </script>’

5. Как вы можете видеть из этого jsFiddle, концепция работает, если ваш код выполняет то, что вы пытаетесь сделать: jsfiddle.net/jfriend00/jwg3S . Не видя вашей функционирующей веб-страницы, я не уверен, что мы действительно можем рассказать вам больше о том, что не так.

Ответ №1:

Как указал Jfriend00, ваш селектор излишне длинный. '#nav li' будет достаточно.
А еще лучше, поскольку вы только (предположительно) ищете прямого потомка для использования #nav '#nav > li' .

Также (кто-нибудь, пожалуйста, поправьте меня, если я ошибаюсь), но я думаю, что ваш скрипт должен идти ниже, где вы загружаете внешние скрипты. Попытка использовать jQuery до его загрузки может вызвать проблемы 😉