2016-12-16 5 views
-1

私はメニューで "li's"を生成するforeachを使用しています。現在のところ、2つの "li"しかありません。このボタンをクリックすると、このメニューはより細くなります。このとき、フォントサイズを小さくしたいと思っています。Jquery each toggleClass

each()関数の中でtoggleClass()関数を使ってみましたが、最初の "li"だけがクラスをトグルします。

foreach ($results as $result){ 
         $local = $result['local']; 
        echo "<li><a class='clsPostData1' data-local='".$result['local']."' data-salaid='".$result['salaid']."' data-salakey='".$result['salakey']."'href='#'><span id='idfontsala'>".$local."</span></a></li>"; 
        } 

私はスパン内で "idfontsala" IDを使用しています。

<script> 

     $(document).ready(function(){ 
    $('.sidebar-toggle').click(function(){ 
    $('#idfontsala').each(function(){ 
     $(this).toggleClass('classfontsala'); 
    }); 
    }); 
}); 

    </script> 

これは何が起こっているかである:あなたがしたい場合は、生成されたすべての項目がhttps://i.imgsafe.org/34d4f934b5.png

+0

$ .eachメソッドでIDを使用していることがわかりました。練習では、html idsはユニークで、これはあなたの問題である可能性があることを意味します。あなたのマークアップが見えますか? –

+0

気にしないで、あなたのIDを見つけました。 idの代わりにクラスを使ってみてください。 –

+4

'.each()'を使う必要はありません。 '$( 'selector').toggleClass( 'classname')'だけを使うことができ、それらはすべてトグルします。しかし、@ PeterClark氏によると、複数の要素を照合するためにIDではなくクラスを使用する必要があります。 – Barmar

答えて

0

に影響を与えたことを。クラスを使用して、複数の要素に一致させます。であなたのマークアップを置き換えます

$('.fontsala').each(function(){ 
    $(this).toggleClass('classfontsala'); 
}); 

UPDATE:と

<span class='fontsala'> 

そして、あなたのスクリプトをあなたはまだ$ .eachを使用したい場合は

これがあります。しかし、@ Barmarが言ったように、それは短縮することができます。

$('.fontsala').toggleClass('classfontsala');