Добавление атрибутов к якорю в Wordpress

Я хочу добавить пользовательские настройки атрибута в сгенерированную якорную ссылку Wordpress. Это позволяет Jquery Mobile находить атрибуты и создавать из них кнопку.

Каждая якорная ссылка, сгенерированная в Wordpress через PHP, содержит класс page_item. Итак, я предполагаю, что нужно найти нужный класс «page_item» и просто добавить информацию о необходимых атрибутах для создания нужной кнопки.

Мой файл header.php содержит следующие ссылки на необходимые библиотеки Jquery:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

Я хотел использовать следующий код, чтобы добавить атрибуты к своим якорным ссылкам, но я просто не могу заставить его работать. (Этот код размещен в шапке файла header.php)

    <script type="text/javascript">
                    $('.page_item').ready(function(){
                     $(this).attr('data-transition', 'pop');
                     $(this).attr('data-icon', 'arrow-r');
                     $(this).attr('data-iconpos', 'left');
                     $(this).attr('data-role', 'button');
                    });

        </script>

При проверке кода через firebug Wordpress генерирует следующий код:

<ul>

                    <li class="page_item page-item-5"><a href="http://localhost/ddwp/?page_id=5">Home</a>
<ul class='children'>
<li class="page_item page-item-11"><a href="http://localhost/ddwp/?page_id=11">Link1</a></li>
</ul>
</li>
<li class="page_item page-item-17"><a href="http://localhost/ddwp/?page_id=17">Link2</a></li>
<li class="page_item page-item-21"><a href="http://localhost/ddwp/?page_id=21">Link3</a></li>
<li class="page_item page-item-23"><a href="http://localhost/ddwp/?page_id=23">Link4</a></li>
<li class="page_item page-item-62 current_page_item"><a href="http://localhost/ddwp/?page_id=62">Link5</a></li>
                </ul>

Заранее спасибо!

С уважением Dragon54


wordpress jquery attributes anchor jquery-mobile
person Dragon54    schedule 05.04.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Ваш скрипт не работает по нескольким причинам. Вот некоторые предложения и некоторый код, который протестирован для применения атрибутов, которые вам нужны, к ссылкам в навигации:

  1. Вы можете рассмотреть возможность переноса ready из каждого отдельного вызова в функцию, которая содержит все вызовы, а не для каждого вызова в отдельности. (Я сделал это ниже для вас).
  2. .page_item — это не ссылка, это элемент li. Также обратите внимание, что это ТОЛЬКО навигационные ссылки - это не будет применяться ни к каким ссылкам в содержании страниц/сообщений.

  3. Jquery в WordPress не всегда безопасно запускать с использованием $. Обернув вызовы в готовый документ, вызываемый с помощью jQuery, вы по-прежнему можете использовать $ внутри функции для вызова функций jQuery.

    jQuery(function($) {
    $('.page_item a').each(function(){
        $(this).attr('data-transition', 'pop');
        $(this).attr('data-icon', 'arrow-r');
        $(this).attr('data-iconpos', 'left');
        $(this).attr('data-role', 'button');
    });
});

РЕДАКТИРОВАТЬ:
Согласно превосходным комментариям @Jasper, намного лучший способ сделать это:

jQuery(function($) {
    $('.page_item a').attr({ 'data-transition' : 'pop', 
            'data-icon' : 'arrow-r', 
            'data-iconpos' : 'left', 
            'data-role' : 'button' });
    });
person random_user_name    schedule 05.04.2012
comment
Благодаря cale_b этот код добавил необходимые атрибуты, но моя страница все еще не превратила эти ссылки в кнопки. Какие-либо предложения? Это JsFiddle для большей ясности. Может мне лучше задать эту "проблему с кнопкой" в новом вопросе на сайте? - person Dragon54; 05.04.2012
comment
Это связано с порядком работы jQuery. Если jQuery mobile запущен ДО того, как вы изменили атрибуты, он не получит дополнительные атрибуты. Я предполагаю, что ваш сценарий ПОСЛЕ загрузки мобильного кода jQuery, что означает, что он работает ПОСЛЕ того, как мобильный код jQuery уже запущен. В соответствии с Этот вопрос о переполнении стека, у вас ограниченный контроль. Вы можете ПОПРОБОВАТЬ переместить свой сценарий после сценария jQuery и ПЕРЕД сценарием jQuery Mobile. - person random_user_name; 05.04.2012
comment
Конечно! Большое спасибо! Это решило мою «проблему с кнопками». Надеюсь у тебя хороший день! ;) - person Dragon54; 05.04.2012
comment
Этот код должен быть как минимум цепочечным (нет причин делать выборку $(this) четыре раза), но более того, вы можете немного оптимизировать использование функции .attr() здесь, передав ей карту объектов желаемых изменений атрибутов: $(this).attr({ 'data-transition' : 'pop', 'data-icon' : 'arrow-r', 'data-iconpos' : 'left', 'data-role' : 'button' });: api.jquery.com/attr - person Jasper; 06.04.2012
comment
@Джаспер - спасибо. Вот почему я люблю stackoverflow — я всегда узнаю что-то новое. Вы правы насчет цепи. Иногда я не вдаюсь в эти детали, когда работаю с исходной структурой вопроса. Я должен был предложить это как вариант. Однако я не знал о возможности добавления нескольких атрибутов через функцию .attr(), так что спасибо! - person random_user_name; 06.04.2012
comment
Теперь, когда я снова смотрю на это, цикл не нужен: $('.page_item a').attr({ 'data-transition' : 'pop', 'data-icon' : 'arrow-r', 'data-iconpos' : 'left', 'data-role' : 'button' });. Цикл необходим только в том случае, если вы хотите сделать что-то другое для каждого из элементов (например, изменить тип перехода на основе класса элемента). И в этом действительно нет необходимости, потому что вы можете передать .attr() функцию, в которой вы можете сделать то же самое. - person Jasper; 06.04.2012

arrow_upward
2
arrow_downward

$.ready() — это специальное событие для загрузки документа, которое работает только с документом. Вместо этого вам нужно перебирать элементы, используя $.each().

$(document).ready(function(){
  $('.page_item').each(function() {
    $(this).attr('data-transition', 'pop');
    $(this).attr('data-icon', 'arrow-r');
    $(this).attr('data-iconpos', 'left');
    $(this).attr('data-role', 'button');
  });
});
person jeremyharris    schedule 05.04.2012
comment
Не педантичный, но код должен быть $(this).data('transition', 'pop'); - нет необходимости в .attr() - person Steve; 05.04.2012
comment
Я просто сохранил его код как есть. Что касается меня, то я бы тоже не стал дублировать $(this). - person jeremyharris; 05.04.2012

arrow_upward
1
arrow_downward 

jQuery(function() {
    jQuery('li.page_item a').each(function () {
        jQuery(this).attr({
            'data-transition': 'pop',
            'data-icon': 'arrow-r',
            'data-iconpos': 'left',
            'data-role': 'button'
        });
    });
});

или просто

jQuery(function () {
    jQuery('li.page_item a').attr({
        'data-transition': 'pop',
        'data-icon': 'arrow-r',
        'data-iconpos': 'left',
        'data-role': 'button'
    });
});
person Luca Filosofi    schedule 05.04.2012