时间戳

首页 > 解决方案 > 如何从 DIV 元素内的 FOR 循环中读取数据

javascript - 如何从 DIV 元素内的 FOR 循环中读取数据

问题描述

考虑下一个代码：

生成的 HTML：

            <!DOCTYPE html>
            <html lang="en">

            <head>
                  <meta charset="utf-8">
                <title>Website TEST</title>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <meta name="description" content="">
                <link rel="stylesheet"                 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            </head>

            <body>

              <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
              <a class="navbar-brand" href="#">Ww1</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

                              <div class="collapse navbar-collapse" id="navbarWw1">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                  <li class="nav-item active">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)                </span>                </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="map">Map</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="about">About</a>
                  </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                  <input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()"  placeholder="Find your next memories!">
                </form>
                              </div>
                            </nav>

              <div class="container-fluid" id="networdapp"                 style="display:none;">
                 <div class="row" >
                    <div v-for="result in results" class="col-sm-6" >
                      <div class="card m-3 h-240  bg-light" >
         <div class="card-header text-center" > {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info"                 onclick="getData();">Details</a>
             </div>
         </div>
                      </div>
                  </div>
            </div>
              </body>

              <script src="https://unpkg.com/vue"></script>
              <script src="https://unpkg.com/axios/dist/axios.min.js">                </script>

              <script>

            function myFunction() {
                var input , filter , OK = false ;
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
            if(filter.length > 0 ) {
            document.getElementById("networdapp").style.display = "";
            $( ".col-sm-6" ).each(function( index ) {
            if ($(this).text().toUpperCase().indexOf(filter) > -1){
            this.style.display="";
            }else{
            this.style.display="none";
            }
            });
            }
            else{
            document.getElementById("networdapp").style.display = "none";
            }
            }


              </script>

              <script type="text/javascript">
              const vm = new Vue({
                el: '#networdapp',
                data: {
                  results:[]
                 },
                 mounted() {
                   axios.get('/getJson')
                 .then(response => {
                    this.results = response.data;
                 })
                 .catch( e => {
                   console.log(e);
                 });
                }
              });

            function getData() {
            window.alert($(this).parents("#networdapp").find(".card-header.text-center").text());
            window.alert(console.log( $(this).closest(".row").find(".card-header.text-center").html() ));
            }

              </script>

            </html>

还有我的代码片段（我正在使用 EJS）：

             <!DOCTYPE html>
             <html lang="en">

             <head>
               <%- include('head'); -%>
             </head>

             <body>

               <%- include('navbar'); -%>

               <div class="container-fluid" id="networdapp" style="display:none;">
                  <div class="row" >
                     <div v-for="result in results" class="col-sm-6" >
                       <div class="card m-3 h-240  bg-light" >
                          <div class="card-header text-center" > {{ result.title }} </div>
                            <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" onclick="getData();">Details</a>
                              </div>
                          </div>
                       </div>
                   </div>
             </div>
               </body>


               <%- include('scripts') -%>

               <script type="text/javascript">
               const vm = new Vue({
                 el: '#networdapp',
                 data: {
                   results:[]
                  },
                  mounted() {
                    axios.get('/getJson')
                  .then(response => {
                     this.results = response.data;
                  })
                  .catch( e => {
                    console.log(e);
                  });
                 }
               });

             function getData() {
             window.alert($(this).parents("#networdapp").find(".card-header.text-center").text());
             window.alert(console.log( $(this).closest(".row").find(".card-header.text-center").html() ));
             }

               </script>

             </html>

我想要做的：将在其中<div class="container-fluid" id="networdapp">执行<div v-for="result in results" class="col-sm-6" >n 次，我想要的是：我想单击随机生成的“详细信息”按钮并从（从）<div v-for="result in results" class="col-sm-6" >获取数据并存储将其转换为变量，然后将其用于另一个 x.ejs 页面。到目前为止，我所做的只是读取所有 div 的所有内容，或者......像显示 2x 一样获得未定义代码片段中的代码行（实际上是第二个。第一个不会显示任何内容）。这几乎是我的问题......我无法从这个 v-for from 生成的随机 div中读取数据.我一直在尝试用 JQuery 做很多事情来解决这个问题，但不知道我做错了什么。{{ result.title }}<div class="card-header text-center">window.alert{{result.title}}<div v-for="result in results" class="col-sm-6" >

我正在使用 EJS、Vue.JS、一点 JQuery（我尝试读取数据）以及 Axios 等其他一些库。

先感谢您！

标签： javascripthtmlcssvue.jsvuejs2

解决方案

由于您使用的是不需要的 Vue.js onclick，因此您可以将其替换为@click并传递您的result和$event类似的参数：

...
<a href="/details" class="btn btn-info" @click="getData(result,$event)">Details</a> 
...

并在您的方法内部调用该函数，如下所示：

const vm = new Vue({
  el: '#networdapp',
  data: {
    results:[]
  },
  methods:{
    getData: function(result, event) {
      // and do whatever you want with that result and event like
      console.log(event.target.outerHTML);
      // here your target is a anchor element (<a></a>) which you can access its attributes ..       
     }
   }
   ...
 }

你也可以删除那个function getData(){...}

推荐阅读