1. Python技术站首页
  2. css

js仿微信公众平台打标签功能

• css
yizhihongxing

当我们想对一堆数据进行分类时，最常见的方法就是给它们打上标签。仿微信公众平台打标签功能就是实现这个功能的一个应用。

本攻略将基于JavaScript实现仿微信公众平台打标签功能，主要实现以下几个功能：

  1. 创建标签：用户可以在应用中创建标签，每个标签都具有一个唯一的标识符和一个名称。

  2. 编辑标签：用户可以编辑标签的名称。

  3. 删除标签：用户可以删除一个或多个标签。

  4. 给数据打标签：用户可以给一堆数据打上一个或多个标签。

  5. 根据标签过滤数据：用户可以根据标签来过滤数据。

步骤：

1. HTML

我们首先需要在HTML文件中创建一个基础的结构。这里，我们将创建一些表单元素来让用户创建、编辑和删除标签，以及将标签应用于数据。

<!DOCTYPE html>
<html>
  <head>
    <title>JS仿微信公众平台打标签功能</title>
  </head>
<body>
   <div class="tag-container">
      <h2>标签管理</h2>
      <input type="text" id="new-tag" placeholder="请输入新标签名" />
      <button type="button" id="add-tag-btn">创建标签</button>
      <div id="tags-container">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>名称</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="tags-table-body"></tbody>
        </table>
      </div>
    </div>

    <div class="data-container">
      <h2>数据标记</h2>
      <div class="data-table-container">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>内容</th>
              <th>标签</th>
            </tr>
          </thead>
          <tbody id="data-table-body"></tbody>
        </table>
      </div>
    </div>

  </body>
</html>

2. CSS

由于我们创建了一些表单元素，我们需要一些CSS来修饰其外观。

body {
  font-family: Arial, sans-serif;
}

input[type="text"], button {
  padding: 5px;
  margin: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
}

button {
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  text-align: center;
}

th {
  background-color: #007bff;
  color: #fff;
}

.data-container {
  margin-top: 40px;
}

.new-tag-container {
  margin-top: 20px;
}

.new-tag-container label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.new-tag-container input[type="text"] {
  width: 80%;
}

.tag-container {
  width: 30%;
  float: left;
}

.data-container {
  width: 70%;
  float: left;
}

3. JS代码

现在让我们来到重头戏 —— JavaScript。为了更好地组织代码，我们将自定义一个标签管理器和数据标记器对象，分别对应应用中的标签管理和数据标记两个功能。这两个对象都具有以下方法。

标签管理器（TagManager）对象：
  • addTag(name)：添加标签。
  • deleteTag(id)：删除标签。
  • editTag(id, name)：编辑标签。
  • getAllTags()：获取所有标签。
  • getTagById(id)：根据标识符获取标签。
  • addTagToData(tagId, dataId)：将标签应用于指定的数据。
数据标记器（DataManager）对象：
  • addData(data)：添加数据。
  • deleteData(id)：删除数据。
  • addTagToData(tagId, dataId)：将标签应用于指定的数据。
  • removeTagFromData(tagId, dataId)：从指定的数据中移除标签。
  • getData()：获取所有数据。

下面是此应用程序实现的核心JavaScript代码。

// 标签管理器对象
const TagManager = {
  tags: [],

  addTag(name) {
    const newTag = {
      id: this.tags.length + 1,
      name,
    };
    this.tags.push(newTag);

    return newTag;
  },

  deleteTag(id) {
    const index = this.tags.findIndex(tag => tag.id === id);
    this.tags.splice(index, 1);
  },

  editTag(id, name) {
    const tag = this.getTagById(id);
    tag.name = name;
  },

  getAllTags() {
    return this.tags;
  },

  getTagById(id) {
    return this.tags.find(tag => tag.id === id);
  },

  addTagToData(tagId, dataId) {
    const tag = this.getTagById(tagId);
    const data = DataManager.getDataById(dataId);
    if (data) {
      if (!data.tags.includes(tag)) {
        data.tags.push(tag);
      }
      return data;
    }
  }
};

// 数据标记器对象
const DataManager = {
  data: [],

  addData(data) {
    const newdata = {
      id: this.data.length + 1,
      content: data,
      tags: [],
    };
    this.data.push(newdata);

    return newdata;
  },

  deleteData(id) {
    const index = this.data.findIndex(data => data.id === id);
    this.data.splice(index, 1);
  },

  addTagToData(tagId, dataId) {
    const tag = TagManager.getTagById(tagId);
    const data = this.getDataById(dataId);
    if (data) {
      if (!data.tags.includes(tag)) {
        data.tags.push(tag);
      }
      return data;
    }
  },

  removeTagFromData(tagId, dataId) {
    const tag = TagManager.getTagById(tagId);
    const data = this.getDataById(dataId);
    if (data) {
      const index = data.tags.findIndex(t => t.id === tagId);
      data.tags.splice(index, 1);
      return data;
    }
  },

  getDataById(id) {
    return this.data.find(data => data.id === id);
  },

  getData() {
    return this.data;
  },
};

// DOM 操作

const TagTable = {
  tableBody: document.querySelector("#tags-table-body"),

  init() {
    this.render();
  },

  render() {
    TagManager.getAllTags().forEach(this.renderTag.bind(this));
  },

  renderTag(tag) {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${tag.id}</td>
      <td>${tag.name}</td>
      <td>
        <button
          class="btn-edit-tag"
          data-tag-id="${tag.id}"
        >编辑</button>
        <button
          class="btn-delete-tag"
          data-tag-id="${tag.id}"
        >删除</button>
      </td>
    `;
    row.querySelector(".btn-edit-tag").addEventListener("click", this.editTagClicked.bind(this));
    row.querySelector(".btn-delete-tag").addEventListener("click", this.deleteTagClicked.bind(this));
    this.tableBody.appendChild(row);
  },

  editTagClicked(event) {
    const tagId = parseInt(event.target.dataset.tagId);
    const tagName = prompt("请输入新标签名");
    if (tagName) {
      TagManager.editTag(tagId, tagName);
      this.refreshTable();
    }
  },

  deleteTagClicked(event) {
    const tagId = parseInt(event.target.dataset.tagId);
    TagManager.deleteTag(tagId);
    this.refreshTable();
  },

  refreshTable() {
    this.clearTable();
    this.render();
  },

  clearTable() {
    this.tableBody.innerHTML = "";
  },
};

const DataTagTable = {
  tableBody: document.querySelector("#data-table-body"),

  init() {
    this.render();
  },

  render() {
    DataManager.getData().forEach(this.renderData.bind(this));
  },

  renderData(data) {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${data.id}</td>
      <td>${data.content}</td>
      <td>${this.getTagString(data.tags)}</td>
    `;
    this.tableBody.appendChild(row);
  },

  getTagString(tags) {
    return tags.map(tag => tag.name).join(", ");
  },
};

const NewTagForm = {
  tagInput: document.querySelector("#new-tag"),
  btnAddTag: document.querySelector("#add-tag-btn"),

  init() {
    this.btnAddTag.addEventListener("click", this.addTagClicked.bind(this));
  },

  addTagClicked() {
    const tagName = this.tagInput.value.trim();
    if (tagName) {
      const newTag = TagManager.addTag(tagName);
      TagTable.refreshTable();
      this.tagInput.value = "";
    }
  },
};

const TagForm = {
  form: document.querySelector("#tags-container"),

  init() {
    this.form.addEventListener("click", this.tagClicked.bind(this));
  },

  tagClicked(event) {
    if (event.target.classList.contains("btn-delete-tag")) {
      const tagId = parseInt(event.target.dataset.tagId);
      DataManager.getData().forEach(data => {
        if (data.tags.find(tag => tag.id === tagId)) {
          DataManager.removeTagFromData(tagId, data.id);
        }
      });
      TagManager.deleteTag(tagId);
      TagTable.refreshTable();
      DataTagTable.refreshTable();
    } else if (event.target.classList.contains("btn-edit-tag")) {
      TagTable.editTagClicked(event);
    }
  },
};

const DataForm = {
  form: document.querySelector(".data-container"),

  init() {
    this.form.addEventListener("click", this.tagClicked.bind(this));
  },

  tagClicked(event) {
    const dataId = parseInt(event.target.dataset.dataId);
    const tagId = parseInt(event.target.dataset.tagId);
    if (event.target.classList.contains("btn-add-tag-to-data")) {
      DataManager.addTagToData(tagId, dataId);
      DataTagTable.refreshTable();
    } else if (event.target.classList.contains("btn-remove-tag-from-data")) {
      DataManager.removeTagFromData(tagId, dataId);
      DataTagTable.refreshTable();
    }
  },
};

TagTable.init();
DataTagTable.init();
NewTagForm.init();
TagForm.init();
DataForm.init();

复制以上全部代码，当HTML、CSS、JS相应的都写好并完成调试后即可实现数据标注系统的基本需求。

示例1：如何添加一条数据记录？

  • 在页面上找到“数据标记”区域；
  • 点击“创建数据”按钮；
  • 在弹出的输入对话框中输入数据内容；
  • 点击对话框的“保存”按钮；
  • 新创建的数据将被添加到数据标记表格中。

示例2：如何将标签应用于一条数据记录？

  • 在页面上找到“标签管理”区域；
  • 点击“创建标签”按钮；
  • 在弹出的输入对话框中输入新标签的名称；
  • 点击对话框的“创建”按钮；
  • 新标签将被添加到标签管理表格中；
  • 在数据标记表格中，找到要标记的那条数据记录；
  • 在“标签”列中点击“添加标签”按钮；
  • 选择一个或多个要应用到该数据记录的标签；
  • 点击对话框的“保存”按钮；
  • 标签将被应用到数据记录中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js仿微信公众平台打标签功能 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • html,css,javascript是怎样变成页面的

    当我们访问一个网页时，浏览器会发送HTTP请求到服务器，服务器会把请求的页面、样式文件和脚本文件等响应给浏览器，浏览器接收到这些响应后，就开始解析这些文件，将它们转换为页面。 下面是这个过程的具体解释： 1. HTML HTML是超文本标记语言，浏览器会根据HTML文件来渲染页面。HTML文件包含了页面的结构和内容，由一系列标签和属性组成。 浏览器会依次解析…

    css 2023年6月9日
    00

  • margin-top塌陷问题的现象与解决的具体方法

    关于“margin-top塌陷问题”的详细讲解和解决方法如下： 什么是margin-top塌陷问题？ 在网页设计中，我们常常使用margin来控制元素之间的间距。但是在某些情况下，上一个元素的margin-top值却会被下一个元素的margin-top值所代替，这样就会造成上一个元素的margin-top值消失，这个现象被称为margin-top塌陷问题。 …

    css 2023年6月10日
    00

  • 微信小程序如何设置基本的页面样式，做出用户界面UI

    要设置微信小程序的页面样式和用户界面（UI），主要需要针对不同的组件进行样式设置。我们可以使用CSS来实现样式的设置。 设置全局样式 在微信小程序中设置全局样式可以使用 app.wxss 文件。我们可以在这里定义页面中常用的颜色、字体等，这些定义会应用到全局。 /* app.wxss */ /* 定义全局字体和颜色 */ :root { –main-fon…

    css 2023年6月9日
    00

  • CSS3 3D旋转rotate效果实例介绍

    对于“CSS3 3D旋转rotate效果实例介绍”，我将给出完整的攻略，具体如下： 1. 什么是CSS3 3D旋转rotate效果 CSS3中的的3D旋转旋转变换可以通过rotateX,rotateY，rotateZ 和rotate3d(deg,x,y,z)四种方法来实现。一般我们最常使用的是rotateX，rotateY，rotateZ 三种属性。 2. …

    css 2023年6月10日
    00

  • 表单JS弹出填写提示效果代码

    下面是关于“表单JS弹出填写提示效果代码”的完整攻略： 什么是表单JS弹出填写提示效果代码 “表单JS弹出填写提示效果代码”是一种利用JavaScript语言实现的技术，可以应用于网站或应用程序中的表单交互中，用于增强用户体验。当用户填写表单时，该代码可以在需要填写的表单字段上进行弹出提示，引导用户进行填写。这种交互方式可以减少用户在表单填写中的错误，提高用…

    css 2023年6月10日
    00

  • CSS教程：三列固定网页布局实例

    我来为你详细讲解“CSS教程：三列固定网页布局实例”的完整攻略。 标题 首先，你应该创建一个标题，以便读者能够知道你将要讨论的话题。 标题1 接着，我们开始进入正题。这个三列固定网页布局实例的攻略需要考虑以下几个步骤： 定义HTML结构 设定CSS样式 编写样式表 测试结果 标题2-定义HTML结构 首先我们需要定义HTML结构，代码示例如下： <!D…

    css 2023年6月10日
    00

  • HTML5中的Scoped属性使用实例

    下面我将详细讲解一下“HTML5中的Scoped属性使用实例”的完整攻略。 简介 scoped属性是HTML5中<style>标签新增的一个属性，表示该样式仅在当前标签内生效。它的使用可以很方便地实现针对特定元素的样式控制。 语法 scoped属性没有取值，只需要在<style>标签中添加该属性即可，例如： <style sco…

    css 2023年6月10日
    00

  • CSS合理的编码与组织技巧

    下面就是详细讲解“CSS合理的编码与组织技巧”的完整攻略！ 1. 命名规范 在CSS的编写中，命名规范是非常重要的一部分。命名规范不仅可以帮助我们更好地组织和管理代码，还可以提高代码的可读性和可维护性。 1.1 类名和ID名命名规范 类名：使用小写字母和短划线(-)连接，例如：.nav-bar、.main-content。 ID名：使用小写字母和下划线(_)…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部