我目前有 4 个单独的 div，它们都包含不同的文本。此刻我可以检索通过 jQuery 单击了哪个框，但是我希望能够返回其中的文本(标题、地址、距离)。
谁能帮我解决这个问题？
此外，如果有人可以帮助我从 JS 对象或 JSON 中获取这些数据而不是硬编码，那将是一个更好的帮助(抱歉，我对它的工作原理有点不熟悉)
提前致谢!
$(document).ready(function() {
//Currently gets the box ID
$(".address-box").click(function() {
alert("You are clicking " + $(this).attr('id'));
});
});.address-box {
border: 1px solid black;
}
.address-box-number {
width: 20px;
height: 20px;
background-color: black;
color: white;
text-align: center;
padding: 5px;
margin: 10px 0px 0px 10px;
}
.address-data {
margin-left: 15%;
}
.address {
font-size: 17px;
&__name {
p {
font-weight: 600;
}
}
&__location {
font-weight: 500;
}
}
.address-distance {
font-size: 15px;
color: darkgray;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="Square1 address-box" id="box-1">
<div class="address-box-number">1</div>
<div class="address-data">
<div class="address address__name">
<span id="box-1-title">some text</span>
</div>
<div class="address address__location">
<span id="box-1-title">more text</span>
</div>
<div class="address-distance">
<p>000 miles away (00 hour, 00min)</p>
</div>
</div>
</div>
<div class="Square2 address-box" id="box-2">
<div class="address-box-number">2</div>
<div class="address-data">
<div class="address address__name">
<p>CARL ROSNER MOTORCYCLES</p>
</div>
<div class="address address__location">
<p>249 London Road, Romford, Essex, RM7 9NB</p>
</div>
<div class="address-distance">
<p>000 miles away (00 hour, 00min)</p>
</div>
</div>
</div>
<div class="Square3 address-box" id="box-3">
<div class="address-box-number">3</div>
<div class="address-data">
<div class="address address__name">
<p>JACK LILLEY ROMFORD</p>
</div>
<div class="address address__location">
<p>59 - 61 Albert Embankment, Vauxhall, London UK, SE1 7TP</p>
</div>
<div class="address-distance">
<p>000 miles away (00 hour, 00min)</p>
</div>
</div>
</div>
<div class="Square4 address-box" id="box-4">
<div class="address-box-number">4</div>
<div class="address-data">
<div class="address address__name">
<p>JACK LILLEY ASHFORD</p>
</div>
<div class="address address__location">
<p>249 London Road, Romford, Essex, RM7 9NB</p>
</div>
<div class="address-distance">
<p>000 miles away (00 hour, 00min)</p>
</div>
</div>
</div> 
最佳答案
你几乎拥有它。无需获取 ID，只需使用 children 和 text 方法即可。我将创建一个对象变量并用每个 div 中数据的不同部分填充它:
$(document).ready(function() {
$(".address-box").click(function() {
var box = {};
// get all the nested children
var children = $(this).children('.address-data').children()
// iterate through each and make an associative array with the text
$.each(children, function(value) {
var className = $(this).attr('class');
box[className] = $(this).text();
});
// do whatever you want with the box data
console.log(box);
});
});
编辑:更新为遍历子对象并填充对象
关于javascript - 单击父项时获取子项数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48793197/