主页 / 问题 / 1598620
Accepted
Olga Safonova
Asked:2024-11-02 21:03:22 +0000 UTC2024-11-02 21:03:22 +0000 UTC

如何在单击按钮时将 json 输出为 html

  • 772

我需要 3 个产品的 json 信息（名称、描述） 在 html 本身中有 3 个按钮，当您单击按钮 1 时，会显示产品 1 的名称及其在 html 中的描述，依此类推

我不知道如何实现这个。请帮忙

var myObject = {
  "catalogo": [{
      "id": 0,
      "name": "one",
      "description": "111"
    },
    {
      "id": 1,
      "name": "two",
      "description": "222"
    },
    {
      "id": 2,
      "name": "three",
      "description": "333"
    }
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

const bnt1 = document.getElementById('bnt1')
const bnt2 = document.getElementById('bnt2')
const bnt3 = document.getElementById('bnt3')
<div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    建议的第一个解决方案是为每个按钮创建自己的单击处理程序，并明确说明需要输出的内容（对值进行硬编码）：

    const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

const bnt1 = document.getElementById('bnt1')
const bnt2 = document.getElementById('bnt2')
const bnt3 = document.getElementById('bnt3')

bnt1.addEventListener('click', () => {
  name.innerText = myObject.catalogo[0].name;
  description.innerText = myObject.catalogo[0].description;
})

bnt2.addEventListener('click', () => {
  name.innerText = myObject.catalogo[1].name;
  description.innerText = myObject.catalogo[1].description;
})

bnt3.addEventListener('click', () => {
  name.innerText = myObject.catalogo[2].name;
  description.innerText = myObject.catalogo[2].description;
})
    <div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

    这是一个非常糟糕的选择，但作为培训的一部分，“对于 C”来说，它就可以了。

    此外，“对于四”，您可以改进代码。我们将其视为代码的明显重复。让我们将点击处理程序移动到一个单独的函数中

    const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

const bnt1 = document.getElementById('bnt1')
const bnt2 = document.getElementById('bnt2')
const bnt3 = document.getElementById('bnt3')

function btnClick(id) {
  name.innerText = myObject.catalogo[id].name;
  description.innerText = myObject.catalogo[id].description;
}

bnt1.addEventListener('click', () => {
  btnClick(0)
})

bnt2.addEventListener('click', () => {
  btnClick(1)
})

bnt3.addEventListener('click', () => {
  btnClick(2)
})
    <div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

    然而，我们仍然有少量重复代码和硬编码值。让我们改进吧！

    让我们选择页面上的所有按钮元素，并在循环中为每个按钮分配一个处理程序，传递鼠标单击事件。我们还修改了处理函数。我们假设按钮的名称是元素的位置号

    const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

function btnClickC(event) {
  const id = +event.target.innerText -1;
  name.innerText = myObject.catalogo[id].name;
  description.innerText = myObject.catalogo[id].description;
}

document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', btnClickC)
});
    <div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

    好吧，或者您可以使用绑定并将按钮的索引传递给此

    const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

function btnClickU() {
  name.innerText = myObject.catalogo[this].name;
  description.innerText = myObject.catalogo[this].description;
}

document.querySelectorAll('button').forEach((button, index) => {
  button.addEventListener('click', btnClickU.bind(index))
});
    <div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

    也许最正确的选择是为数组的每个元素创建按钮：

    const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

const container = document.getElementById('btnCont');

myObject.catalogo.forEach((elem, index) => {
  const btn = document.createElement('button');
  btn.innerText = elem.id + 1;
  btn.addEventListener('click', function() {
    name.innerText = elem.name;
    description.innerText = elem.description;
  })
  container.appendChild(btn);
})
    <div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div id='btnCont'></div>
</div>

    在这种情况下，当更改数组中的元素数量时，您将不需要编辑代码

    • 2

相关问题