Question

我认为我不了解如何获取所需信息。

我正在使用同位素来布局和排序div。 上下文：在div上单击2个div内容将被附加，然后重新排序到正确的位置。我需要为大于当前数字的div添加一个额外的数字。

    $(document).ready(function() {
    var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows',

    // sort by number
    sortBy: 'number',
    getSortData: {
      'number': '.number parseInt'
    }
  });




  $('.grid-item').click(function(event) {

        $(this).addClass('big');
                $grid.isotope('updateSortData');
        var number = parseInt($(this).find('.number').text(), 10);

        $('.number').each(function(index) {

          var checkNumber = parseInt($(this).text(), 10);

          if (checkNumber > number) {
            $(this).html(checkNumber + 1);
          };

          $grid.isotope('updateSortData');
        });
    }); });

应该发生的事情是：

.grid-item将被点击。

它添加了课程.big

将.number存储为number

所有其他.number div都会根据存储的号码检查号码checkedNumber

如果checkNumber是＆gt;比number然后将+ 1添加到checkNumber

https://jsfiddle.net/qg2xndk6/ - 无效上述

的简单版本

http://codepen.io/anon/pen/XXmjXK - 更大的上下文 - 仍然无效，但您可以看到我计划使用AJAX来引入内容并重新排序布局。 点击几下后，您就会看到订单错误

感谢您的时间和帮助。

Answer 1

这是使用事件委派的绝佳机会。您可以在传播到父容器时处理事件，而不是将事件附加到每个.grid-item。可选的第二个参数将允许您根据单击的元素进行过滤：

$('.grid').on('click', '.grid-item', newclick);

现在，您不再需要在添加新元素后再次绑定事件处理程序。

帮助解决您的代码问题的其他想法：

确保使用适当的缩进
将代码中更高级别的命名函数替换为匿名函数（如setTimeout调用，传递给.each的回调）。它将使您的代码更具可读性。就像你对newclick所做的那样！
for循环是否从0迭代到1？也许你不需要它？
遵循其他JS约定，例如camelCase var和函数名称。

.each语句中的对象与索引

1 个答案: