考虑下一个代码:
生成 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" >的“详细信息”按钮并从 {{ result.title }} 获取数据(来自 <div class="card-header text-center"> )并将其存储到一个变量中，然后将其用于另一个 x.ejs 页面。重点是到目前为止我所做的就是读取所有 div 的所有内容或......变得未定义，就像显示 2x window.alert 一样代码片段中的代码行(实际上是第二个。第一个不会显示任何内容)。这几乎是我的问题......我无法从 {{result.title}} 读取数据来自此 v-for 生成的随机 div <div v-for="result in results" class="col-sm-6" > .我已经用 JQuery 尝试了很多方法来解决这个问题，但无法弄清楚我做错了什么。
我正在使用 EJS、Vue.JS、一些 JQuery(我尝试读取数据)以及其他一些库，例如 Axios。
提前谢谢您!
最佳答案
由于您使用的是 Vue.js，因此不需要 onclick，您可以将其替换为 @click 并传递您的 结果和 $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 ..
}
}
...
}
您也可以删除该函数 getData(){...}
关于javascript - 如何从 DIV 元素内的 FOR 循环读取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52234506/