Question

我根据对象的值填充a。

var myJSON =[  
   {  
       "ID":1417,
       "BF":74,
       "IL":17,
       "Tw":17
   },
   {  
       "ID":1415,
       "BF":63,
       "IL":7,
       "Tw":19
   },
   {  
       "ID":1414,
       "BF":297,
       "IL":2,
       "Tw":30
   },
   {  
       "ID":1413,
       "BF":114,
       "IL":39,
       "Tw":69
   },
   {  
       "ID":1412,
       "BF":592,
       "IL":14,
       "Tw":24
   },
   {  
       "ID":1411,
       "BF":151,
       "IL":18,
       "Tw":57
   }
]

我想从这个JavaScript对象中读取值，并在下面的HTML中填充它：

<div>
  <a class="resp-button__link">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>document.write(javascript:getBF(1415));</span>
      </div>
      </div>
  </a>
   <a class="resp-button__link">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>document.write(javascript:getIL(1415));</span>
      </div>
      </div>
  </a>
  <a class="resp-button__link">
      <div class="res-button res-button--thof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>document.write(javascript:getTw(1415));</span>
      </div>
      </div>
  </a>
</div>

页面上有很多这样的div，它们都没有id。

更新：我已使用css类更新了HTML，并为外部div提供了ID。

<div id="1415">
  <a class="kof">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>BF</span>
      </div>
      </div>
  </a>
   <a class="bhof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>IL</span>
      </div>
      </div>
  </a>
  <a class="thof">
      <div class="res-button res-button--thof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>Tw</span>
      </div>
      </div>
  </a>
</div>

您能否建议如何现在检索值并填充范围。

Live Demo 已更新： Live Demo

Answer 1

您没有看到您的功能被调用的原因是您只是将文本 document.write(javascript:getIL(1415));（例如）放在跨度中。如果您希望将其解释为代码，则需要在其周围添加脚本标记。但是你还需要你的函数是全局变量（它们目前不是 - 这很好）。

document.write在现代网络编程中基本没有位置。相反，如果您需要在事后将此数据应用于跨度，我可能会使用data-* attributes来指定信息类型（例如，“BF”或“Tw”）和ID：

<span data-type="BF" data-id="1415"></span>

然后找到具有这些属性的跨度并将其填入：

$("span[data-type][data-id]").each(function() {
    const span = $(this);
    const type = span.attr("data-type");
    const id   = span.attr("data-id");
    const ob   = findById(id);
    const val  = ob && ob[type];
    if (val) {
        span.text(val);
    }
});

请注意，我只有一个findById函数，而不是每个信息位的单独访问器，因为我们可以使用span中的类型作为要获取的属性的名称。

直播示例：

$(function () {
    const myData = [ 
       {  
           "ID":1417,
           "BF":74,
           "IL":17,
           "Tw":17
       },
       {  
           "ID":1415,
           "BF":63,
           "IL":7,
           "Tw":19
       },
       {  
           "ID":1414,
           "BF":297,
           "IL":2,
           "Tw":30
       },
       {  
           "ID":1413,
           "BF":114,
           "IL":39,
           "Tw":69
       },
       {  
           "ID":1412,
           "BF":592,
           "IL":14,
           "Tw":24
       },
       {  
           "ID":1411,
           "BF":151,
           "IL":18,
           "Tw":57
       }
    ];

    const findById = id => myData.find((elem) => elem.ID == id);

    $("span[data-type][data-id]").each(function() {
        const span = $(this);
        const type = span.attr("data-type");
        const id   = span.attr("data-id");
        const ob   = findById(id);
        const val  = ob && ob[type];
        if (val) {
            span.text(val);
        }
    });
});

<div>
  <a class="resp-button__link">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span data-type="BF" data-id="1415"></span>
      </div>
      </div>
  </a>
   <a class="resp-button__link">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span data-type="IL" data-id="1415"></span>
      </div>
      </div>
  </a>
  <a class="resp-button__link">
      <div class="res-button res-button--thof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span data-type="Tw" data-id="1415"></span>
      </div>
      </div>
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您可能会考虑重新格式化数据，以便您拥有一个对象，而不是一个对象数组，每个ID都有一个属性。所以而不是：

const myData = [ 
   {  
       "ID":1417,
       "BF":74,
       "IL":17,
       "Tw":17
   },
   {  
       "ID":1415,
       "BF":63,
       "IL":7,
       "Tw":19
   },
   // ...
];

你有：

const myData = {
   1417: {  
       "ID":1417, // You could include this ID or leave it out
       "BF":74,
       "IL":17,
       "Tw":17
   },
   1415: {  
       "ID":1415,
       "BF":63,
       "IL":7,
       "Tw":19
   },
   // ...
};

然后我们不再需要findById(id)，只需myData[id]。

Answer 2

您无法使用 document.write 编写json值。因为在HTML文档完全加载后使用document.write（），将删除所有现有的HTML并写入document.write内容。最好用另一种方式设置内容，像：

document.getElementById（＆＃34; demo＆＃34;）。innerHTML =＆＃39; content＆＃39;

在你的情况下，你可以像这样，

<a class="resp-button__link">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span id="content1415"></span> <!--added id to span element-->
      </div>
      </div>
  </a>

在javascript中，

document.getElementById("content1415").innerHTML = getBF(1415);

Answer 3

针对您的具体代码 -

删除行$(function () {和});
您需要执行方法getIL(...)等。将其写入Javascript文件或<Script>标记。
您可以为每个span代码分配ID，并执行此操作

// HTML

<span id="1415"></span>

// JS代码

var _1415 = document.getElementByID('1415);
_1415.innerHTML = getIL('1415);

这会将1415的值放在span标记中。

您可以使用循环和一些动态代码来减少重复次数。

在HTML元素中填充Object的值

3 个答案: