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

or just

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 に答える