2

WordPress関数によって出力されるこのメニューを考えてみましょう。

<ul id="header-cats"> 

    <li class="cat-item cat-item-6"><a href="url" title="View all posts filed under Category I">Category I</a> 
</li> 
    <li class="cat-item cat-item-7"><a href="url" title="View all posts filed under Category II">Category II</a> 
</li> 
    <li class="cat-item cat-item-8"><a href="url" title="View all posts filed under Category III">Category III</a> 
</li> 

</ul>

次に、この投稿のリストについて考えてみましょう。

<ul id="posts-preview" class="clearfix"> 

    <li class="filter-reset filter-hide filter-6 ">             
        <a class="post-thumb" id="post-112" href="url" >Link</a>        
    </li>

    <li class="filter-reset filter-hide filter-6 filter-8 ">            
        <a class="post-thumb" id="post-102" href="url" >Link</a>        
    </li>

    <li class="filter-reset filter-hide filter-7 ">             
        <a class="post-thumb" id="post-88" href="url" >Link</a>         
    </li>

    <li class="filter-reset filter-hide filter-6 ">             
        <a class="post-thumb" id="post-6" href="url" >Link</a>      
    </li>
</ul>

私の目的は、jQuery関数を使用してメニューのクラス名の数字の末尾（つまり、6in cat-item 6）を抽出し、その値を使用して対応する投稿をターゲットにすることです。6詳細を説明するために、これを変数として使用し、filterで終わるクラスを見つけます6。

これが私がこれまでに持っているものです：

  $('#header-cats li').click(function(){  

    var num_id = $(this).attr('class') // ... matching "cat-item-?" etc...

        $(".filter-"+num_id).fadeIn(500); 

        return false;

  });

jsの悪鬼にとっては簡単なはずです:-)

4

3 に答える 3

6

RegExを使用して、クラスIDから番号を取得できます（以下のコードはテストされていません）-

$('#header-cats li').click(function(){  
    var num_id = $(this).attr('class').match(/\d+/); // ... matching "cat-item-?" etc...
    $(".filter-"+num_id).fadeIn(500); 
    return false;
});
于 2011-07-17T09:29:11.183 に答える
4

クラス文字列に数字が 1 つしかないことが確実な場合は、次のように使用できます。

var num_id = $(this).attr('class').match(/\d+/)[0]

よくわからない場合は、次を使用してください。

var num_id = $(this).attr('class').match(/cat-item-(\d+)/)[1]
于 2011-07-17T09:41:06.340 に答える
0

私は通常 .substring(9) を使用して数値を取得しますが、それよりも良い方法があると思います

また、次のように簡単に参照できるように、それをデータ属性値または ID に入れます。

<li class="cat-item" data-catitem-num=8><a href="url" title="View all posts filed under Category III">Category III</a>

次にjqueryで：

$(".cat-item").click(function(){
  var filterNum = $(this).attr("data-catitem-num");
  $(".filter-"+filterNum).fadeIn(500);
  return false;
})

またはその趣旨の何か

要素が一意の「id」を持つ場合は、クラスに入れないことに注意してください。それをidまたはdata-attributeに入れます（したがって、あなたの場合、catitemとfilternumはdata-catitemまたはdata-filternumまたはそれらの要素IDのいずれかになります。

于 2011-07-17T09:21:04.917 に答える