Question

我正在试图弄清楚如何解决这个问题;

这是我的HTML：

<div id="result">
  <div class="selectable" data-id="1"> Item 1 </div>
  <div class="selectable" data-id="2"> Item 2 </div>
  <div class="selectable" data-id="3"> Item 3 </div>
  <div class="selectable" data-id="4"> Item 4 </div>
  <div class="selectable" data-id="5"> Item 5 </div>
</div>

<button class="insert">Insert</button>

<div id="master"></div>

这是JS：

  $(document).ready(function() {
      $("#result").on('click', '.selectable', function() {
          if ($(this).hasClass('active')) {
              $(this).removeClass('active');
          } else {
              $(this).addClass('active');
          }
      });

      $(".insert").on('click', function() {
          var html = '';
          $("#result .active").each(function() {
              var id = $(this).data('id');
              html += '<div class="rows"> ' + id + ' </div>';
          });
          $("#master").prepend(html)
      });
  });

选择和取消选择“.selectable”项目工作正常，但由于某种原因，如果选择了两个项目，插入“master”div的html总是加倍，所以我得到的是4个而不是2个。

我认为每个循环都有问题，如果我做console.log($("#result .highlite").length);之类的话在循环之前，显示正确的所选项目数。

Answer 1

似乎每次点击按钮都应该替换html

尝试更改“

$("#master").html(html)

要

{{1}}

Answer 2

你可以尝试下面的jquery代码：

$(document).ready(function() {
      $("#result").on('click', '.selectable', function() {
      $(".selectable").removeClass('active');
      $(this).addClass('active');          
      });

      $(".insert").on('click', function() {
          var html = '';
          $("#result .active").each(function() {
              var id = $(this).data('id');
              html += '<div class="rows"> ' + id + ' </div>';
          });
          $("#master").prepend(html)
      });
  });

DEMO

希望它能解决您的问题。

由于

jQuery每个循环将找到的结果加倍

2 个答案: