0

我正在使用 Isotope 并希望制作一个正方形元素网格，单击时会放大到更大的尺寸。这一切都很好，但是我想确保在任何时候都只放大一定数量的元素。因此，例如，如果 3 是允许的最大值，那么当单击第四个元素时，第一个被放大的元素会再次缩小。

是否有任何明显的 jQuery 方法来跟踪这个，或者在同位素中确实有一些东西？我可以使用

$('.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 回答