个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我目前有 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/
24
4
0
有人可以给我一个想法，例如将高度从0添加时动画化，并在移除时返回0动画化？ 最佳答案 添加动画时很容易，只需将Animated中的componentDidMount与listRow一起使用，例如： c
我目前有一个包含 3 个选项卡的 tabview。 1 选项卡加载 ActivityGroup，然后加载 listview。我有这个，所以我可以加载不同的 Activity 并查看并仍然显示选项卡。当
此正则表达式 /({{(?!{*textdata.*)#\s*.[\w\.]+\.*}})/gm在 chrome 上使用正则表达式只给我两个匹配项(期望 4)。当我在 http://www.regex
我一直在尝试从头开发一个简单的 Accordion ，但这个问题让我无法这样做。 我正在尝试实现一种效果，您可以在其中展开元素，内容弹出，加号图标变成目标 Accordion 元素的减号 - 至此一切
当用户点击 tabbaritem 进入 uitabbarcontroller 来改变某些东西时，我需要检索..这是我的代码: - (void)tabBar:(UITabBar *)tabBar did
我尝试使用 kv_t 存储一些数据但没有成功。我也尝试过例子forum.c & kv.c。当尝试创建第二个论坛线程时，forum.c 挂起，而 kv.c 崩溃。 当我向 kv 添加 1 个项目时，kv
我正在为 map 构建一个主题选择器，并希望反射(reflect)当前选择的主题。 该代码似乎有效，但从不返回“li”项目的值，它总是为我单击的任何“li”项目返回“s-thumbs”。我尝试使用 .
我正在浏览 Go 并想了解以下内容: package main import "fmt" func main() { s := []int{2, 3, 5, 7, 11, 13} pr
我正在使用 VS2013、.net4.5、WPF 桌面应用程序。 Xaml: CS: this
我正在尝试创建一个搜索抛出 ListView 项目的 Activity 。我创建了一个 switch与 case Category其中 Category是 main 中的一项 ，但是当我单击该项目时，
我是一名优秀的程序员,十分优秀！