添加属性在Word preSS锚 [英] Adding attributes to an anchor in Wordpress

问题描述

我要添加自定义属性设置为Word preSS的产生锚链接。
这是为了让jQuery Mobile的发现的属性，使一个按钮出来的。

I want to add custom attribute settings to a generated anchor link of Wordpress. This is to let Jquery Mobile find the attributes and makes a button out of it.

每一个锚链接，这是在Word preSS通过PHP产生，包含page_item类。所以我的猜测是搜索所需要的'page_item级，只是添加所需的属性信息以生成所需的按钮。

Every anchor link, which is generated in Wordpress via PHP, contains the page_item class. So my guess is to search for the needed 'page_item' class and just add the needed attribute information to generate the needed button.

我的header.php文件包含以下链接到需要的Jquery的库：

My header.php file contains the following links to the needed Jquery libraries:

<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>

我想用下面的code将属性添加到我的锚链接，但我似乎无法让它工作。 （这code为放置在header.php文件的标头）

I wanted to use the following code to add attributes to my anchor links but I just can't seem to let it work. (This code is placed in the header of the header.php file)

    <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>

当检查通过萤火字preSS的code生成以下code：

When checking the code via firebug Wordpress generates the following code:

<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

Kind regards Dragon54

推荐答案

有你的脚本不能正常工作的几个原因。下面是一些建议，那就是测试应用属性一些code你是后导航链接：

There's a few reasons your script isn't working. Here's some suggestions, and some code that is tested to apply the attributes you are after to the links in the navigation:

1. 您可以考虑移动就绪从一个包含所有的呼叫，而不是单独为每个调用一个函数的每个单独调用了。 （我已经做到了下面你）。


2. .page_item 不是一个链接，这是一个li元素。另外请注意，这仅仅是导航链接 - 它不会应用到页/帖内容有任何联系
。


3. Jquery的在Word preSS并不总是安全的使用 $ 运行。通过调用的jQuery 准备一份文件，你仍然可以使用 $ 在函数中调用了jQuery的包裹通话功能。

1. You might consider moving the ready away from each separate call to a function that contains all of the calls rather than for each call separately. (I have done that below for you).
2. .page_item is not a link, it is an li element. Also note that this is ONLY the navigation links - it will not apply to any links in the content of the pages/posts.

3. Jquery in WordPress is not always safe to run using $. By wrapping the calls in a document ready called with jQuery, you can still use $ within the function to call the jQuery functions.

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：

EDIT :
Per the excellent comments by @Jasper the much better way to do this would be:

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

这篇关于添加属性在Word preSS锚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！