2

我想将自定义属性设置添加到生成的 Wordpress 锚链接。这是为了让 Jquery Mobile 找到属性并从中制作一个按钮。

每个通过 PHP 在 Wordpress 中生成的锚链接都包含 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

4

3 回答 3

3

您的脚本无法正常工作有几个原因。以下是一些建议，以及一些经过测试以将您所追求的属性应用于导航链接的代码：

  1. 您可能会考虑将ready每个单独的调用移到一个包含所有调用的函数，而不是单独的每个调用。（我在下面为你做了）。
  2. .page_item不是一个链接，它是一个 li 元素。另请注意，这只是导航链接 - 它不适用于页面/帖子内容中的任何链接。

  3. WordPress 中的 Jquery 使用$. 通过将调用包装在准备好的用 调用的文档中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' });
    });
于 2012-04-05T15:06:30.100 回答
2

$.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');
  });
});
于 2012-04-05T14:57:55.463 回答
1 
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'
    });
});
于 2012-04-05T15:11:51.833 回答