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

Question

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

我需要你们的帮助，我想要 html

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

jquery 根据 html 值获取 json 数据。然后拿到之后想根据那个li值加上stylebackground-image属性，结果就是这样

<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
      });
    });
  });

Answer 1

将您的属性更改为数据值。值不是有效的 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 + ")");
      });
    });
  });

Answer 2

你可以试试这个：

$(document).ready(function() {
  $.getJSON('https://api.myjson.com/bins/yrgg4', function(data) {
    $.each(data, function(key, icon) { 
            $("li[value='" + icon.id + "']").css("background", "url(" + icon.image + ") no-repeat");
      });
    });
  });

更多：访问this

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

how to get json data based on html values using jquery?

jquery

json

background-image