1

ブログのどこかで見つけた JavaScript コードのスニペットを最小化ボタンに使用しましたが、意図したとおりに機能しません。ブログでは、{block:Photo} など、さまざまな種類の投稿にブロックを使用しています。

    {block:Photo}
    <div class="PhotoPost">
    <div class="PhotoWrapper">                            
    <div class="Button">-</div>    
    <div class="box">

    <script type="text/javascript">
    $(".Button").click(function(){
    if($(this).html() == "-"){
            $(this).html("+");
            }
    else{
            $(this).html("-");
            }
            $(".box").slideToggle();
            });
    </script>

    <img class="PhotoPostImage" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
        <!-- Some more code -->
    </div>
    </div>
    </div>
    </div>

最小化ボタンをクリックすると、ボタンがある写真投稿を最小化するのではなく、写真投稿の数だけすべての写真投稿を最小化および最大化します。

前もって感謝します！

4

3 に答える 3

0

変化する

      $(".box").slideToggle();

に

      $(this).next('.box').slideToggle();

.next('.box')
.closest('box')
.siblings('.box')

すべてが機能するはずです

を使用したため、クリックされた div のアイコン html のみが変更されていたことに注意してください$(this)。slideToggle()box

于 2013-05-04T19:01:16.027 に答える
0

あなたのコードは、ページ内のどこに$('.box')あるクラスのすべての要素と一致する which を使用します。box代わりに、クリックされたボタンと同じ PhotoWrapper 内の 1 つだけを選択します。

$(this).closest('.PhotoWrapper').find('.box').slideToggle();

ところで、適切なマイナス記号 (-、&#x2212;HTML では\u2212、JavaScript では) を使用することをお勧めします。これは、置き換えられるプラス記号と視覚的に一致するため-です。ハイフンは、しばしば小さく、低く表示されます。

$(this).html('\u2212');
于 2013-05-04T19:18:15.487 に答える