javascript - 如何在jquery中每组新数据后面放置一个br标签

Question

那里有六个按钮和一个添加按钮，当我单击任何按钮并单击添加按钮时，我会获得它们的值，因此如果我单击第一个按钮和第三个按钮，然后单击添加，我将获得第一个按钮和第二个按钮第三个按钮的值。但是，当我再次尝试时，假设我单击第二个和第五个按钮，然后单击“添加”，我得到了值的按钮，它们会连接到在我希望它给出两个 br 标签然后显示值之前存在的最后一个值

这是我的代码

var valArray = [];
      $('button').click(function() {
        if (valArray.indexOf(this.value) === -1) {
          valArray.push(this.value);
          return false;
        }
      });

      $('.add').click(function() {
        $("#values").html(valArray + " ");

      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='linux'><i class='fa fa-check'></i>
linux
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='apple'><i class='fa fa-check'></i>
apple
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='windows'><i class='fa fa-check'></i>
windows
</button>




<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='chrome'><i class='fa fa-check'></i>
chrome
</button>



<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='netscape'><i class='fa fa-check'></i>
netscape
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='github'><i class='fa fa-check'></i>
github
</button>




<button type="button" id="addButton" class="add">Add</button>


<div id="values">


      </div>

Answer 1

添加到 Value div 后，您应该清空 valArray。这意味着任何新值都将是单独的。

var valArray = [];
      $('button').click(function() {
        if (valArray.indexOf(this.value) === -1) {
          valArray.push(this.value);
          return false;
        }
      });

      $('.add').click(function() {
        var valueText = $("#values").html();
        console.log(valueText);
        $("#values").html(valueText + valArray + "<br><br>");
        valArray = [];
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='linux'><i class='fa fa-check'></i>
linux
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='apple'><i class='fa fa-check'></i>
apple
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='windows'><i class='fa fa-check'></i>
windows
</button>




<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='chrome'><i class='fa fa-check'></i>
chrome
</button>



<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='netscape'><i class='fa fa-check'></i>
netscape
</button>

<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='github'><i class='fa fa-check'></i>
github
</button>




<button type="button" id="addButton" class="add">Add</button>


<div id="values">


      </div>