时间戳

首页 > 解决方案 > 如何使用 jquery 获取基于 html 值的 json 数据？

jquery - 如何使用 jquery 获取基于 html 值的 json 数据？

问题描述

我是 jquery 的初学者，但我想完成我的项目。

我需要你们的帮助，如果我制作 html 我想要

<li value="bca"></li>
<li value="bni"></li>
<li value="bri"></li>
<li value="mandiri"></li>
etc....

jquery 根据 html 值获取 json 数据。然后得到它之后，我想根据那个li值添加样式背景图像属性，结果会是这样的

<li style="background-image:url("images/bca.png");" value="bni"></li>

这是json文件

[
   {
     "id": "bca",
     "image": "https://lh3.googleusercontent.com/-DzsioYaEw00/XJx4ldwgXbI/AAAAAAAAFOA/6xR4vKNHJnYPzyAmN_sike27rzTozXW8QCLcBGAs/h110/bca.png"
   },
   {
     "id": "bni",
     "image": "https://lh3.googleusercontent.com/-Km8RS__aFmY/XJx4lSZom7I/AAAAAAAAFOE/D6BYDFfRpUQdKILGREKGtKN8lLsjMijzACLcBGAs/h107/bni.png"
   },
   {
     "id": "bri",
     "image": "https://lh3.googleusercontent.com/-_si-RcoPgn8/XJx4laAI9DI/AAAAAAAAFN8/H6p0uAGp5LsjeETFJCO0wrX0IVRUMRsOQCLcBGAs/h71/bri.png"
   },
   {
     "id": "mandiri",
     "image": "https://lh3.googleusercontent.com/-7wME_gGOqlE/XJx4nKuMKoI/AAAAAAAAFOQ/e_g1zof81zA4RtoLvhXId-u5bbwynm2fgCLcBGAs/h105/mandiri.png"
   }
]

这是我的jQuery

$(document).ready(function() {
  $.getJSON('https://vhlan.com', function(data) {
    $.each(data, function(key, icon) { // "icon" to get data from json file example icon.image
    // I don't know this part
      });
    });
  });

标签： jqueryjsonbackground-image

解决方案

将您的属性更改为数据值。值不是有效的 HTML 数据属性。

$(document).ready(function() {
  $.getJSON('https://api.myjson.com/bins/yrgg4', function(data) {
    $.each(data, function(key, icon) { // "icon" to get data from json file example icon.image
      // Select based on attribute value.
      // Use css() to add icon to background-image
      $("[data-value='" + icon.id + "']").css("background-image", "src(" + icon.image + ")");
      });
    });
  });

推荐阅读