在另一个 div 中获取 JSON 附加项答案

【问题标题】：Get JSON appended items in another div在另一个 div 中获取 JSON 附加项
【发布时间】：2016-05-23 23:16:44
【问题描述】：

我正在尝试获取一个 JSON 附加项，以便在单击另一个 div 时显示。

例如——

$.getJSON("URLHERE", function(result){
    $.each(result, function(i, field){
     $(".mydiv").append( "<div class='newdiv'>" + field.name + "," + field.event +  "</div>");
  });

这会获取我的 JSON 信息并将其添加到每个项目的 .mydiv 中。

现在 - 我正在尝试再次获取此信息，以显示在另一个 div 中，但仅适用于所选项目。我试图添加一个点击函数来显示 JSON 信息，但只针对选定的，但没有运气。

$('.mydiv').click(function() {
         $(".seconddiv").append(field.name);
 });

如果有人能让我走上正轨，我将不胜感激。

谢谢！

编辑

我的 HTML

   <div class="container">
      <div class="row">
         <div class="col-md-8">
            <div class="mydiv">
               <h1>...</h1>
            </div>
         </div>
         <div class="col-md-4">
            <div class="seconddiv">
               <h1>...</h1>
            </div>
         </div>
      </div>
   </div>

编辑 2

$.getJSON("URLHERE", function(result){
       $.each(result, function(i, field){
         $(".mydiv").append( "<div class='newdiv'>" + field.name + "," + field.event +  "</div>");

         $(document).on('click', 'div.newdiv', function(){
           $('div.seconddiv').append( $(this).html() );
        });

      });

编辑 3：

所以，这是可行的，但它会循环遍历每个 JSON 并提取名称，我基本上只需要这个名称。

       $(document).ready(function() {
      $.getJSON("URLHERE", function(result){
        $.each(result, function(i, field){
          $(".mydiv").append( "<div class='newdiv'>" + field.name + "," + field.event +  "</div>");
       });


        $('.newdiv').click(function() {
         $(".seconddiv").append(field.name); // HOW TO ONLY GET THIS FIELD NAME, NOT FOR EACH JSON ITEM
      });

     });
   });

【问题讨论】：

请分享您的html
您尚未发布任何 HTML。我确实相信 <div class="mydiv"></div> 包含在您的 HTML 中。你能验证一下吗？
将 HTML 添加到 OP :)

标签： javascript jquery html json api

【解决方案1】：

功能有点不清楚，但是当您想要显示信息并且单击时仅在不同的 div 中显示选定的名称时，这里有一个解决方案。我建议将 JSON 属性作为数据元素存储在新创建的 div 上，以后可以通过简单的点击处理程序轻松检索。

jsfiddle 在这里：https://jsfiddle.net/7961d87z/

只有代码

HTML

<!-- placeholder for your data -->
    <div class="mydiv"></div>
<!-- placeholder for click events -->
    <div class="result"></div>

Javascript

//fake data
    result= [{name:"item1", event: "something"}, {name:"item2", event: "someevent"}];


     $.each(result, function(i, field){
     //create an element and append data attribute to the element - in this case field name
     el = $("<div class='newdiv'>" + field.name + "," + field.event +  "</div>").data("name", field.name);
     //append element to DOM
        $(".mydiv").append( el );
        })
      //define a click handler for all new elements to display data in a div
        $(".mydiv").on( "click", ".newdiv", function() {
      $(".result").text( $( this ).data("name") );
    });

【讨论】：

嗨，Michal，这很好用！唯一的问题 - 有没有办法将此文本添加到新的 div 中，直到我想删除它。例如 - 我单击了第一个名称和事件，它会在新的 div 中显示名称。然后我单击另一个，它位于其下方而不是替换它？也许喜欢再次单击它以将其从该 div 中删除？对不起，额外的工作，我会接受我的 OP 要求的答案！

【解决方案2】：

它不在加载时附加的 DOM 元素中。您要做的实际上是管理单击的元素：

jQuery(document).on('click', 'div.mydiv', function(){
    
});

您还必须记住，您无法在$.getJSON() 呼叫之外访问JSON。

编辑

要仅显示您点击的那个，您需要获取.html() 并将其附加到新的div。看起来像这样：

jQuery(document).on('click', 'div.mydiv', function(){
    jQuery('div.mynewdiv').append( jQuery(this).html() );
});

【讨论】：

感谢您的回答，但我是个初学者。 jQuery(document).on('click', 'div.mydiv', function(){ $(".seconddiv").append(field.name); });现在应该只显示被点击项目的名称？
是的，应该，但您需要了解，如果field.name 不在您的$.getJSON() 内，您就无法访问它。除非你想在另一个 div 中显示已经创建的 div 对吗？
对不起，我想显示 field.name 但仅显示点击的数据。所以我有 9 个输出，当我单击其中一个时，我只希望所选名称显示在一个完全独立的 div 中
我已经用尝试的代码编辑了我的 OP。它现在正在提取所有信息，但执行 X 次，因此如果有 9 位信息，它会执行 9 次。另外，有没有办法只获取一位数据，而不是通过名称和事件来提取名称？
编辑了操作。谢谢！

【解决方案3】：

这将为具有类mydiv的元素创建HTML

$.getJSON("URLHERE", function(result){
    $.each(result, function(i, field){
     $(".mydiv").append( "<div class='newdiv'>" + field.name + "," + field.event +  "</div>");
  });

使用它来将你想要的信息附加到.seconddiv

$(document).on('click','.newdiv',function() {
     $(".seconddiv").append($(this).html()); // fieldName,fieldEvent
});

【讨论】：