jQuery中点击对象发生变化时，内容也随之变化

最新推荐文章于 2023-01-03 21:25:20 发布

Zwq8023520

最新推荐文章于 2023-01-03 21:25:20 发布

阅读量509

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Zwq8023520/article/details/127531618

版权

今天在做项目时遇到了这样的一个问题

当时我写的源代码是：

$(".nav-text").on("click", "div", function () {
  const word = $(this).text()
  $.ajax({
    url: "/irs/front/list",
    type: "post",
    data: JSON.stringify({
      code: "183bfb9e71e",
      searchFields: [
        {
          fieldName: "f_20221020157787",
          searchWord: "部门文件",
          withHighLight: true,
        },
        {
          fieldName: "f_20221010942026",
          searchWord: "",
          withHighLight: true,
        },
        {
          fieldName: "f_20221010711106",
          searchWord: "",
          withHighLight: true,
        },
        {
          fieldName: "f_20221010690856",
          searchWord: "",
          withHighLight: true,
        },
        {
          fieldName: "f_20221010433833",
          searchWord: "",
          withHighLight: true,
        },
        {
          fieldName: "f_20221020790441",
          searchWord: `${word}`,
          withHighLight: true,
        },
      ],
      tableName: "t_183bfb8fe36",
      pageNo: window.page,
      pageSize: "2",
      customFilter: {
        operator: "and",
        properties: [
          {
            property: "f_20221010627513",
            operator: "gte",           
            "value":"2022-08-26"
          },
          {
            property: "f_20221010627513",
            operator: "lte",           
            "value":"2022-09-26"
          },
        ],
      },
    }),
    headers: {
      "Content-Type": "application/json;charset=utf-8",
      athenaAppKey: rsaAppKey,
      athenaAppName: rsaAppName,
      transformRequest: [
        function (data) {
          return typeof data === "object" && String(data) !== "[object File]"
            ? toFormData(data)
            : data;
        },
      ],
    },
success: function (res) {

      const content = res.data.list

      console.log(content)

      content.map((item,index)=>{

        $('.order').append(`<div>${index+1}</div>`)

        $('#rq').append(`<div>${item.f_20221010627513.split(" ")[0]}`)

        $('.news').append(`<div>${item.f_20221010942026}</div>`)

      })

    }

相信经验丰富的程序员一眼就看出来我的问题所在，正是因为我写的是append，append本身就是在后面进行追加元素，而不是我想的它会将第二次遍历完的替换掉第一次并追加在后面。

解决方法：找一个合适的时机将子元素内容全部清空。

$(".nav-text").on("click", "div", function () {
  // 一上来先清空列表的子元素，防止后面无限追加
  $('.order,#rq,.news').empty()
  const word = $(this).text()
  $.ajax({
    url: "/irs/front/list",
    type: "post",
    data: JSON.stringify({
      code: "183bfb9e71e",
      searchFields: [
        {
          fieldName: "f_20221020157787",
          searchWord: "部门文件",
          withHighLight: true,
        },
        {
          fieldName: "f_20221010942026",
          searchWord: "",
          withHighLight: true,
        },
        {
          fieldName: "f_20221010711106",
          searchWord: "",
          withHighLight: true,
        },
        {
          fieldName: "f_20221010690856",
          searchWord: "",
          withHighLight: true,
        },
        {
          fieldName: "f_20221010433833",
          searchWord: "",
          withHighLight: true,
        },
        {
          fieldName: "f_20221020790441",
          searchWord: `${word}`,
          withHighLight: true,
        },
      ],
      tableName: "t_183bfb8fe36",
      pageNo: window.page,
      pageSize: "2",
      customFilter: {
        operator: "and",
        properties: [
          {
            property: "f_20221010627513",
            operator: "gte",
            "value":"2022-08-26"
          },
          {
            property: "f_20221010627513",
            operator: "lte",
            "value":"2022-09-26"
          },
        ],
      },
    }),
    headers: {
      "Content-Type": "application/json;charset=utf-8",
      athenaAppKey: rsaAppKey,
      athenaAppName: rsaAppName,
      transformRequest: [
        function (data) {
          return typeof data === "object" && String(data) !== "[object File]"
            ? toFormData(data)
            : data;
        },
      ],
    },
    success: function (res) {
      const content = res.data.list
      console.log(content)
      if(content.length === 0){
        $('.news').append("<p>暂无数据</p>")
      } else{
        content.map((item,index)=>{
          $('.order').append(`<div>${index+1}</div>`)
          $('#rq').append(`<div>${item.f_20221010627513.split(" ")[0]}`)
          $('.news').append(`<div>${item.f_20221010942026}</div>`)
        })
      }
    },
  });
});

最终效果：