如何从DIV元素内的FOR循环中读取数据 [英] How to read data from a FOR loop inside DIV elements
问题描述
考虑下一个代码:
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):
And there is my code snippet(I'm using 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 =结果结果" class ="col中执行-sm-6> 让我们说n次，我想要的是:我想单击随机生成的< div v-for ="结果的详细信息"按钮结果" class ="col-sm-6"> 并从 {{result.title}} (从< div class ="card-header text-center> )并将其存储到变量中，然后将其用于另一个x.ejs页面.关键是到目前为止，我所做的只是读取所有div或所有div的内容.....变得不确定，就像显示代码片段中的2x window.alert 代码行一样(实际上是第二行，第一个不会显示任何内容).问题...我无法从< div v-for ="result结果从此v-for生成的随机div中读取.已经尝试使用JQuery进行很多操作来解决此问题，但无法弄清楚我在做什么错. {{result.title}} 中的数据结果""class =" col-sm-6>
What I want to do:
The within the <div class="container-fluid" id="networdapp"> will be executed the <div v-for="result in results" class="col-sm-6" > let'say for n times and what I want is : I want to click on the "Details" button of a random generated <div v-for="result in results" class="col-sm-6" > and get the data from {{ result.title }} (from the <div class="card-header text-center"> ) and store it into a variable and then use it for another x.ejs page.The point is all I've done till this moment was to read all the content of all divs or....to get undefined just like what will show the 2x window.alert code lines from the code snippet(actually the second one.the first won't show anything).And that's pretty much my problem...I can't read the data from a {{result.title}} from a random div generated by this v-for from <div v-for="result in results" class="col-sm-6" >.I've been trying a lot of things with JQuery to solve this problem but can't figure out what I'm doing wrong.
我正在使用EJS，Vue.JS，一些JQuery(我尝试读取数据)以及其他一些库，例如Axios.
I'm using EJS,Vue.JS, a bit of JQuery (my tries to read data), and some other libraries like Axios.
提前谢谢！
推荐答案
由于您使用的是Vue.js，因此不需要 onclick ，可以将其替换为 @click 并像参数一样传递您的结果和 $ event :
Since you're using Vue.js you don't need onclick, you could replace it by @click and pass your result and $event like parameters :
...
<a href="/details" class="btn btn-info" @click="getData(result,$event)">Details</a>
...
在您的方法内部按如下方式调用该函数:
and inside your methods call that function as follow :
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(){...}
这篇关于如何从DIV元素内的FOR循环中读取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
