Question

我想将自定义属性设置添加到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

Answer 1

您的脚本无法运行的原因有几个。以下是一些建议，以及一些经过测试的代码，用于将您追溯的属性应用到导航中的链接：

您可以考虑将ready从每个单独的调用移至包含所有调用的函数，而不是分别针对每个调用。（我已经为你做了以下事情）。
.page_item不是链接，而是li元素。另请注意，这只是导航链接 - 它不适用于页面/帖子内容中的任何链接。

使用$运行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' });
    });

Answer 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');
  });
});

Answer 3

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'
    });
});

在Wordpress中向锚点添加属性

3 个答案: