Semantic-UI 列表内容变化

Semantic-UI 是一款流行的前端框架之一，包含了丰富的 UI 组件来构建漂亮的 Web 应用程序。

在 Semantic-UI 中，列表是一个常见的 UI 组件。列表不仅可以显示静态内容，还可以根据某些事件或数据变化来动态更新内容。

本文将介绍如何在 Semantic-UI 中实现列表内容的变化。

静态列表

先来看一个静态列表的示例：

<div class="ui list">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

这段代码创建了一个简单的列表，其中包含 3 个项目。每个项目都是一个 div 元素，带有 item 类。列表本身也带有 list 类。

运行代码，你会看到一个简单的列表如下：

动态列表

以上的列表是静态的，我们可以使用 JavaScript 来动态修改列表内容，以响应用户交互或其他变化。

例如，我们可以添加一个按钮来动态添加一个新项目。假设我们有以下 HTML 代码：

<div class="ui list" id="myList">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<button id="addButton">Add Item</button>

现在，我们需要添加一些 JavaScript 代码来处理 button 的点击事件，并且向列表中添加一个新的项目。

const addButton = document.querySelector('#addButton');
const myList = document.querySelector('#myList');

addButton.addEventListener('click', function() {
  const newItem = document.createElement('div');
  newItem.classList.add('item');
  newItem.textContent = 'New Item';
  myList.appendChild(newItem);
});

这段代码中，我们首先通过 querySelector 找到 button 和列表元素 myList。然后，我们添加一个名称为 click 的事件监听器，以响应按钮的点击事件。在监听器函数中，我们使用 createElement 创建一个新的 div 元素，添加 item 类，将其文本内容设置为 "New Item"，最后将其添加到 myList 列表中。

运行代码，点击按钮，你会看到新的项目被动态添加到列表中。

提示：

上面的示例代码使用了原生 JavaScript，如果你使用 jQuery、React、Vue 等其他前端库或框架，可以使用相应的方法来实现类似的效果。

删除列表项

除了添加项目，我们还可以删除列表项。更改 JavaScript 代码如下：

const removeButton = document.querySelector('#removeButton');
const myList = document.querySelector('#myList');

myList.addEventListener('click', function(e) {
  if (e.target.classList.contains('item')) {
    e.target.remove();
  }
});

这段代码中，我们首先找到新的按钮 removeButton，用于删除最后添加的项目。然后，我们在列表元素 myList 上添加一个名称为 click 的事件监听器，以响应列表中项目的点击事件。在监听器函数中，我们检查点击的元素是否具有 item 类。如果是，我们就将其从 DOM 中删除。

运行代码并点击新添加的项目，你会看到该项目被成功地从列表中删除。

总结

本文介绍了如何在 Semantic-UI 中实现列表内容的变化，包括添加和删除列表项。你可以使用类似的方法来实现其他对列表内容的修改，例如更新项目文本内容、在列表中移动项目等等。

Semantic-UI 是一个功能强大的前端框架，可以帮助你构建漂亮的 Web 应用程序。如果你还不熟悉它，请花点时间学习一下。