Question

最终，我正在创建一个由正方形组成的网格，当用户将鼠标悬停在正方形上时，它周围会有一定数量的正方形被缩放。

目前，我正在使用isotrope.js将其布置在网格中（稍后将更改为自定义布局）并使用prevAll和nextAll以及多个切片切换多个类。

总共有5种尺寸的正方形。 25px base，200px for active，100px，75px和50px，最终结果是围绕有效的最大值到最小值（最终）的正方形。

现在我有正确的div在交换类方面做正确的事情，但似乎可能有更好的方法。

更新：JSFiddle来自rdubya：http://jsfiddle.net/gtf8xh61/

的js更新

这是我原来的js：

  $( function() {

  var $container = $('.isotope').isotope({
    itemSelector: '.item',

  });

  $('.item').click(function() {

    $( this ).toggleClass('zoom200');
    $( this ).prev().toggleClass('zoom100');
    $( this ).prevAll().slice(5, 8).toggleClass('zoom100');
    $( this ).prevAll().slice(11, 12).toggleClass('zoom75');
    $( this ).prevAll().slice(15, 16).toggleClass('zoom75b');
    $( this ).prevAll().slice(1, 5).toggleClass('zoom50');
    $( this ).prevAll().slice(8, 10).toggleClass('zoom50b');
    $( this ).prevAll().slice(19, 22).toggleClass('zoom50c');
    $( this ).prevAll().slice(12, 15).toggleClass('zoom50d');
    $( this ).next().toggleClass('zoom100');
    $( this ).nextAll().slice(5, 8).toggleClass('zoom100');
    $( this ).nextAll().slice(11, 12).toggleClass('zoom75');
    $( this ).nextAll().slice(15, 16).toggleClass('zoom75b');
    $( this ).nextAll().slice(1, 5).toggleClass('zoom50');
    $( this ).nextAll().slice(8, 10).toggleClass('zoom50b');
    $( this ).nextAll().slice(19, 22).toggleClass('zoom50c');
    $( this ).nextAll().slice(12, 15).toggleClass('zoom50d');
    $container.isotope('layout')
  });

});

Answer 1

如果您发布html我可以尝试为逻辑提供另一种解决方案（如果有的话），但在此之前，您可以使用以下内容清理当前的js：

$( function() {

  var $container = $('.isotope').isotope({
    itemSelector: '.item'
  });

  $('.item').click(function() {
    var $this = $(this),
        $following = $this.nextAll(),
        $preceding = $this.prevAll();

    $this.toggleClass('zoom200');

    $this.prev().toggleClass('zoom100');
    $preceding.slice(5, 8).toggleClass('zoom100');
    $preceding.slice(11, 12).toggleClass('zoom75');
    $preceding.slice(15, 16).toggleClass('zoom75b');
    $preceding.slice(1, 5).toggleClass('zoom50');
    $preceding.slice(8, 10).toggleClass('zoom50b');
    $preceding.slice(19, 22).toggleClass('zoom50c');
    $preceding.slice(12, 15).toggleClass('zoom50d');

    $this.next().toggleClass('zoom100');
    $following.slice(5, 8).toggleClass('zoom100');
    $following.slice(11, 12).toggleClass('zoom75');
    $following.slice(15, 16).toggleClass('zoom75b');
    $following.slice(1, 5).toggleClass('zoom50');
    $following.slice(8, 10).toggleClass('zoom50b');
    $following.slice(19, 22).toggleClass('zoom50c');
    $following.slice(12, 15).toggleClass('zoom50d');

    $container.isotope('layout')
  });

});

这将减少创建的新对象的数量并加快执行速度。

更新：我无法在逻辑上提出更好的解决方案，但这是另一种可能的解决方案，如果您不需要前后兄弟姐妹，这将减少一些重复并使其更易于维护有不同的类别：

$(function () {

    var $container = $('.isotope').isotope({
        itemSelector: '.item'
    });

    var CLASSES = [
        { start: 0, end: 1, name: 'zoom100'},
        { start: 1, end: 5, name: 'zoom50'},
        { start: 5, end: 8, name: 'zoom100'},
        { start: 8, end: 10, name: 'zoom50b'},
        { start: 11, end: 12, name: 'zoom75'},
        { start: 12, end: 15, name: 'zoom50d'},
        { start: 15, end: 16, name: 'zoom75b'},
        { start: 19, end: 22, name: 'zoom50c'}
    ];

    $('.item').click(function () {
        var $this = $(this),
            $following = $this.nextAll(),
            $preceding = $this.prevAll();

        for(var i = 0; i < CLASSES.length; i++) {
            $preceding.slice(CLASSES[i].start, CLASSES[i].end).toggleClass(CLASSES[i].name);
            $following.slice(CLASSES[i].start, CLASSES[i].end).toggleClass(CLASSES[i].name);
        }

        $this.toggleClass('zoom200');
        $container.isotope('layout')
    });

});

使用prevAll（），nextAll（），slice（）和重复类切换多个类...更好的方法？

1 个答案: