如何在jquery

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。这意味着任何新值都将是独立的。

＆＃13;

＆＃13;

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 = [];
      });

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改：

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

致：

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

结果：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;