Question

因此，我尝试创建一个javascript事件，输出在单击后将列表的每一行放入数组中。我想出了这段代码：

<div id="app">
 <ul class="nav nav-pills nav-justify">
        <li role="presentation" class="active"><a href="#">Businesses</a></li>
        <li role="presentation"><a href="#">Events</a></li>
        <li role="presentation"><a href="#">Locations</a></li>
 </ul>
 <br />
  <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Add a Business</h3>
    </div>
    <div class="panel-body">
     <form id="form">
      <div class="form-group">
        <label for="exampleInputPassword1">Business Name</label>
        <input v-model="newPost.title" type="text" class="form-control" id="exampleInputPassword1" placeholder="Business Name">
      </div>

      <div class="form-group">
        <label for="basic-url">Vanity URL</label>
        <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">/businesses/</span>
        <input v-model="newPost.content" type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
      </div>
    </div>
    <div class="form-group">
     <label for="basic-url">Description</label>
     <textarea v-model="newPost.story" name="" id="" cols="30" rows="10"></textarea>
     </div>
     <button type="button" class="btn btn-default" v-if="newPost['.key']" v-on:click="updatePost(newPost)">Update</button>
     <button type="submit" class="btn btn-default" v-if="!newPost['.key']" v-on:click="addPost">Add Business</button>
</form>
</div>
    </div>

    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">Businesses</div>

        <!-- Table -->
        <table class="table table-striped">
            <tr>
                <th>Business Name</th>
                <th>Vanity URL</th>
                <th>Story</th>
                <th>Actions</th>
            </tr>
            <tr v-for="post in posts" :key="post['.key']">
                <td contenteditable v-model="newPost.title">{{post.title}}</td>
                <td>{{post.content}}</td>
                <td>{{post.story}}</td>
                <td>
                    <button v-on:click="editPost(post)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</button>
                    <button v-on:click="removePost(post)" type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</button>
                </td>
            </tr>
        </table>
    </div>

    <ul class="errors">
    </ul>
</div>

但是它输出了数组的重复值这有什么问题？

编辑：

var lista = [];
$("#lista li").click(function(){
  for (i = 0; i < $("#lista li").length; i++) {
    if($("#lista li input")[i].checked) {
      lista.push($('#lista li')[i].innerText);
      console.log(lista);
    } else {
      lista.splice(lista.indexOf($('#lista li')[i].innerText), 1)
    }
  }
})

Answer 1

var lista = [];
$("#lista li").click(function(){
    for (i = 0; i < $("#lista li").length; i++) {
        if($("#lista li input")[i].checked) {
            lista.push($('#lista li')[i].innerText);
        } else {
            lista.splice(lista.indexOf($('#lista li')[i].innerText), 1)
        }
    }
    console.log(lista);
})

一旦将所有元素添加到指定数组，就会输出所有元素。

注意：请注意console.log不在循环中

编辑：将日志功能放在点击事件中。

Answer 2

您可以访问JQuery核心，为什么不使用它？ https://jsfiddle.net/googabeast/udazr5vp/

<ul id="lista" class="drilldown" style="width: 100%">
  <li><input id="hemograma" type="checkbox" value="hemograma" style="margin-bottom: 0px;"><label for="hemograma" id="e0">Hemograma</label></li>
  <li><input id="glicemia" type="checkbox" value="glicemia" style="margin-bottom: 0px;"><label for="glicemia" id="e1">Glicemia de jejum</label></li>
  <li><input id="ctotal" type="checkbox" value="colesterol" style="margin-bottom: 0px;"><label for="ctotal" id="e2">Colesterol total</label></li>
  <li><input id="hdl" type="checkbox" style="margin-bottom: 0px;"><label for="hdl" id="e3">HDL</label></li>
  <li><input id="trig" type="checkbox" style="margin-bottom: 0px;"><label for="trig" id="e4">Triglicérides</label></li>
  <li><input id="TSH" type="checkbox" style="margin-bottom: 0px;"><label for="TSH" id="e5">TSH</label></li>
</ul> 

<div class="result"></div>




var lista = [];
$("#lista li input[type='checkbox']").click(function(){
    var text = $(this).parent().text().trim();

    if($(this).is(":checked")){
        lista.push(text)
    }else{
        lista.splice(lista.indexOf(text), 1)
    };

    $(".result").text(lista.toString())
});

对于循环奇怪的输出

2 个答案: