Question

我一直在研究一个简单的代码，它会检测一个项目收到的点击次数，并将它放在列表的顶部，问题是，我只能替换第一个项目一次，如果我再次点击它并不能累计项目内的点击次数。这是为什么？

我的代码： （Ctrl + Shift + I）并检查items以查看更改

＆＃13;

$(function() {
  $('.watchMe > .item').attr({
    "influence": "0"
  });
});
$('.watchMe > .item').mousedown(function() {
  $(this).attr({
    "influence": parseInt($(this).attr("influence"), 10) + 1
  });
});
$(document).on('mouseup', function(e) {
  rearrangeEm();
});

function rearrangeEm() {
  var tempArray = [];
  $('.watchMe > .item').each(function() {
    tempArray.push([this, parseInt($(this).attr("influence"), 10)]);
    console.log(this);
  });
  for (var i = 0; i < tempArray.length; i++) {
    for (var j = i + 1; j < tempArray.length; j++) {
      var temp;
      if (tempArray[i][1] < tempArray[j][1]) {
        temp = tempArray[i];
        tempArray[i] = tempArray[j];
        tempArray[j] = temp;
      }
    }
  }
  $('.watchMe').empty();
  for (i = 0; i < tempArray.length; i++) {
    $('.watchMe').append(tempArray[i][0]);
  }

}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>smartSystem</title>
  <style>
    .item {
      height: 100px;
      border: 1px solid #c3c3c3;
    }
  </style>
</head>

<body>
  <div class="watchMe">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
  </div>
</body>

</html>

＆＃13;

Answer 1

问题是因为您删除了绑定了.item事件的原始mousedown元素，因此您需要使用委派的事件处理程序。试试这个：

$('.watchMe').on('mousedown', '> .item', function() {
  $(this).attr({
    "influence": parseInt($(this).attr("influence"), 10) + 1
  });
});

但请注意，您可以使用data()属性（而不是使HTML代码无效的自定义属性）和sort()方法来改进和缩短逻辑。试试这个：

＆＃13;

$(function() {
  $('.watchMe').on('mousedown', '> .item', function() {
    $(this).data('influence', ($(this).data('influence') || 0) + 1);
  });

  $(document).on('mouseup', function(e) {
    rearrangeEm();
  });
});

function rearrangeEm() {
  $('.watchMe > .item').sort(function(a, b) {
    var aInf = $(a).data('influence') || 0, bInf = $(b).data('influence') || 0;
    return aInf < bInf ? 1 : aInf > bInf ? -1 : 0;
  }).appendTo('.watchMe');
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>smartSystem</title>
  <style>
    .item {
      height: 100px;
      border: 1px solid #c3c3c3;
    }
  </style>
</head>

<body>
  <div class="watchMe">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
  </div>
</body>

</html>

＆＃13;

无法在jQuery上对我的html列表进行排序

1 个答案: