0

私は同位体を使用しており、クリックすると大きなサイズに拡大する正方形要素のグリッドを作成したいと考えています。これで問題ありませんが、一度に一定量の要素のみが拡大されるようにしたいと考えています。したがって、たとえば、最大許容値が 3 の場合、4 番目をクリックすると、拡大された最初の要素が再び縮小されます。

これを追跡する明らかなjQueryメソッドはありますか、それともIsotope内に何かありますか? を使用して要素を数えることができます

$('.large-element').length;

しかし、クラスが切り替えられた順序を追跡する明白な方法を知りません。配列もまともな解決策になると思いますが、JS配列ではかなり絶望的です。

ありがとう。

4

1 に答える 1

0

JS 配列を使用してアイテムのクリックを追跡する実際の例を次に示します。

<html>
    <head>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
        <script type="text/javascript">
            var largeArr = [];

            $(document).ready( function() {

                $("div.item").click( function() {
                    if (largeArr.length == 3) {
                        largeArr[0].removeClass("item-large");
                        largeArr.shift();  
                    }
                    var item = $(this).addClass("item-large");                                                
                    largeArr.push(item); 
                });
            });
        </script>
        <style type="text/css">
            .item-large {
                font-size: 14px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </body>
</html>

これが実際のJSFiddleです。

于 2012-05-17T15:47:23.847 に答える