首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在JS fetch()中突出显示单击的项

在JS的fetch()中突出显示单击的项,可以通过以下步骤实现:

  1. 首先,使用fetch()函数发送异步请求获取数据。fetch()是一种现代的网络请求API,用于从服务器获取数据。
  2. 在fetch()的回调函数中,处理返回的数据。可以使用.then()方法来处理成功的响应,并将响应转换为JSON格式。
  3. 将获取到的数据渲染到页面上,可以使用DOM操作将数据插入到HTML元素中。
  4. 为每个项添加点击事件监听器。可以使用事件委托的方式,将事件监听器添加到父元素上,然后通过事件对象的target属性来判断点击的是哪个项。
  5. 在点击事件处理函数中,可以通过修改CSS样式来突出显示被点击的项。可以使用element.style属性来修改元素的样式,例如修改背景色、字体颜色等。

以下是一个示例代码:

代码语言:txt
复制
// 使用fetch()发送异步请求获取数据
fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 将数据渲染到页面上
    const list = document.getElementById('list');
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.textContent = item.name;
      list.appendChild(listItem);
    });

    // 为每个项添加点击事件监听器
    list.addEventListener('click', event => {
      // 判断点击的是哪个项
      if (event.target.tagName === 'LI') {
        // 突出显示被点击的项
        event.target.style.backgroundColor = 'yellow';
        event.target.style.color = 'red';
      }
    });
  });

在上述示例中,我们使用fetch()函数获取名为"data.json"的数据,并将其渲染到一个列表中。然后,为列表的每个项添加了一个点击事件监听器。当点击某个项时,通过修改其CSS样式,将其突出显示为黄色背景和红色字体。

请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行更复杂的处理和样式修改。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券