Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Теперь мы команда!

Удаление/Изменение параметров html-тегов (Элементов) при помощи JavaScript

Автор: в категории Статьи о 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 🙂

Вверх!

Меню блога

Категории блога

Облако тегов