Question

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

Answer 1

你几乎拥有它。不要抓取ID，只需使用User: idUser, name, email, password ConferenceCreator: idConferenceCreator, name, description, email, idUser (fk) Conference: idConference, name, description, date, ..., idUser(fk)和sudo visudo方法即可。我创建一个对象变量，并用每个div的数据的不同部分填充它：

children

编辑：更新以迭代子项并填充对象

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

Answer 2

第1步

创建类似'.box-title'，'。box-address'，'。box-distance'

<div class="Square1 address-box" id="box-1">
    <div class="address-box-number">1</div>
    <div class="address-data">
        <div class="address address__name">
            <p id="box-1-title" class="box-title">some text</p>
        </div>
        <div class="address address__location">
            <p id="box-1-address" class="box-address">more text</p>
        </div>
        <div class="address-distance">
            <p class="box-distance">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 class="box-title">CARL ROSNER MOTORCYCLES</p>
        </div>
        <div class="address address__location">
            <p class="box-address">249 London Road, Romford, Essex, RM7 9NB</p>
        </div>
        <div class="address-distance">
            <p class="box-distance">000 miles away (00 hour, 00min)</p>
        </div>
    </div>
</div>

第2步：使用find（）获取值并使用array.push（）将它们传递给数组

$(document).ready(function() {
            var data = [];
    //Currently gets the box ID
            $(".address-box").click(function() {
                    data.push({
                        name: $(this).find('.box-title').text(),
                        address : $(this).find('.box-address').text(),
                        distance: $(this).find('.box-distance').text(),
                    });
                console.log(data);
            });


        });

现在您可以将此数组转换为任何可能的格式

已编辑：使用json数据动态更新DOM

你可以使用append（）方法来做到这一点。

var data = [ // this array contains your data
            {
                name:
                address:
                distance:
            }
        ];
        var context='';
                for(let x=0;x<data.length ; x++){
                    context += '<div class="Square1 address-box" id="box-1">\n' +
                        '    <div class="address-box-number">1</div>\n' +
                        '    <div class="address-data">\n' +
                        '        <div class="address address__name">\n' +
                        '            <p id="box-1-title" class="box-title">' +
                        data[x]['name'] +
                        '</p>\n </div>\n' +
                        '        <div class="address address__location">\n' +
                        '            <p id="box-1-address" class="box-address">' +
                        data[x]['address'] +
                        '</p>\n </div>\n' +
                        '        <div class="address-distance">\n' +
                        '            <p class="box-distance">' +
                        data[x]['distance'] +
                        '</p>\n </div>\n' +
                        '    </div>\n' +
                        '</div>'
                }

                $('#context').append(context);

Answer 3

回答问题，必须以子元素为目标并调整类名：）

单击父级时获取子数据

3 个答案: