个人中心
gpt4 book ai didi

javascript - 单击父项时获取子项数据

转载 作者：行者123 更新时间：2023-11-30 11:23:50 24 4
gpt4 key购买 nike

我目前有 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>

What i currently have on my page

最佳答案

你几乎拥有它。无需获取 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);
  });


});

编辑:更新为遍历子对象并填充对象

https://jsfiddle.net/bd0dd3jt/14/

关于javascript - 单击父项时获取子项数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48793197/

24 4 0
文章推荐： JavaFX 不会在 Mac 上的 BlueJ 中导入
文章推荐： iOS推送通知自定义声音无法弄清楚
文章推荐： ios - 从 View 中删除 ScrollView 及其中的所有内容
文章推荐： java - 解决 ANTLR4 中的 Lexer 和 Parser 歧义
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com