Question

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

有没有明显的jQuery方法来跟踪这个，或者确实是同位素内的东西？我可以使用

来计算元素

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

但我不知道有任何明显的方法来跟踪课程的切换顺序。我猜一个阵列也是一个不错的解决方案，但我对JS阵列毫无希望。

感谢。

Answer 1

以下是使用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的实际操作。

切换一定量后，选择最旧的切换类

1 个答案: