Удаление/Изменение параметров html-тегов (Элементов) при помощи JavaScript
5 сентября 2011 в 1:42 в категории Статьи о JavaScript 0 комментариевДоброе время суток, Уважаемые Читатели!
Долго не писал в свой блог, ибо ничего интересного, не было.
И вот появилось! Итак, ближе к теме.
При разработке очередного проекта понадобилось изменить параметры некоторых html элементов. В связи с отсутствием доступа к исходному коду функции, которая выводила необходимую информацию, пришлось работать с JavaScript.
Задача
Генерируется меню категорий интернет-магазина на WP E-Commerce, и в соответствии с иерархией категорий необходимо было реализовать раскрывающееся меню.
Для этого необходимо было:
- Добавить необходимый параметр в определенные html элементы («li»)
- Удалить необходимый параметр из определенного html элемента («href»)
- Скрыть необходимые категории, которые являлись вложенными
Решение:
Для начала, в файле вывода меню wpsc-category_widget.php (wp-content/plugins/wp-e-commerce/wpsc-theme/) я реализовал вывод категорий таким образом, чтобы у каждого элемента, с которым я бы работал был уникальный id.
Реализация такая (25-60 строки файла wpsc-category_widget.php ):
<?php else : ?> <div id="categorisation_group_<?php echo $category_id; ?> " class="wpsc_categorisation_group"> <ul class="wpsc_categories wpsc_top_level_categories"> <li id="nikshack-<?php echo $curr_cat['term_id']; ?>" class="wpsc_category_<?php echo $curr_cat['term_id']; wpsc_print_category_classes($curr_cat); ?>" style="color: #4f647f; cursor: pointer;"> <?php if(! ($category_image == WPSC_CATEGORY_URL) ){ ?> <?php } ?> <?php echo esc_html( $curr_cat['name'] ); ?> <ul class="wpsc_categories wpsc_second_level_categories"> <ul class="wpsc_categories wpsc_second_level_categories"> <li id="nikshack-<?php wpsc_print_category_id();?>" class="wpsc_category_<?php wpsc_print_category_id(); wpsc_print_category_classes_section();?>"> <a id="nikshack-l<?php wpsc_print_category_id();?>" class="wpsc_category_link" href="<?php wpsc_print_category_url(); ?>"> <?php wpsc_print_category_name(); ?> <?php if ( 1 == get_option( 'show_category_count') ) wpsc_print_category_products_count( "(",")" ); ?> </a> <?php wpsc_print_subcategory( '<br ?> <ul class="third" style="display: none;">', '</ul> ' ); ?></li> </ul> </ul> </li> </ul> </div> <?php endif; ?>
После этого посмотрел какие категории находятся в какой иерархии, открыв страницу и посмотрев исходный код.
И после этого написал Javascript для удаления параметров href для ссылок и добавление параметров onclick для элементов списка li.
Код получился не громоздким и не очень сложным, хотя новичкам пригодится.
JavaScript:
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { document.getElementById('nikshack-4').setAttribute("onclick", "$(this).children().show();"); document.getElementById('nikshack-5').setAttribute("onclick", "$(this).children().show();"); document.getElementById('nikshack-9').setAttribute("onclick", "$(this).children().show();"); document.getElementById('nikshack-14').setAttribute("onclick", "$(this).children().show();"); document.getElementById('nikshack-15').setAttribute("onclick", "$(this).children().show();"); document.getElementById('nikshack-l14').removeAttribute("href"); document.getElementById('nikshack-l15').removeAttribute("href"); document.getElementById('second-4').style.display = "none"; document.getElementById('second-5').style.display = "none"; document.getElementById('second-9').style.display = "none"; }); // ]]></script>
Первые пять строк добавляют функцию onclick для всех категорий, имеющих вложенные категории. Последующие две удаляют параметр href у тех категорий которые вложены и имеют еще вложенный список. Последние три строки — прячем все дочерние списки. К сожалению третьего уровня списки пока не решил как прятать через JS и просто вписал style=»display:none;» для них в исходнике.
Для чего я написал такую простую на первый взгляд статью?
Все просто, шаблон виджета списка категорий для WP E-commerce имеет достаточно странную структуру.
Основные разделы 1-ого уровня вы можете редактировать как хотите. А вот со вторым уровнем по сложнее, ибо все изменения примененные ко второму уровню (например, попробуйте удалить для ссылок на категории второго уровня параметр href, и у вас у категорий третьего уровня так же пропадет этот параметр) будут применены к категориям третьего. Как я понял ссылки на категории третьего уровня генерируются по примеру (шаблону) категорий второго уровня.
Вроде все, спасибо за внимание! Пишите, если что-то не понятно, или нужна помощь.
Понравилась статья? Поставь +1 🙂