点赞收藏 切换

.bottom-list {
        display: flex;
        align-items: center;
        margin-left: 10px;
        cursor: pointer;
      }

      .fenxiang {
        color: rgba(54, 58, 68, 1);
        font-size: 16px;
        margin-right: 4px;
      }

      .icon {
        width: 20px;
        height: 20px;
        display: block;
        font-size: 0;
      }

      .pinglun {
        color: rgba(186, 186, 186, 1);
        font-size: 16px;
        margin-left: 4px;
      }

      .pinglun1 {
        color: rgba(247, 129, 11, 1);
      }



 <div
      class="bottom-list dianzan"
        data-show="false"
        data-zan="zan"
      >
        <div class="icon icon1" style="display: none">
          <img src="../../assets/images/icons/dianzan1.png" alt="" />
        </div>
        <div class="icon icon2">
          <img src="../../assets/images/icons/dianzan.png" alt="" />
        </div>
        <div class="pinglun">点赞 (3)</div>
      </div>
      <div
        class="bottom-list dianzan"
        data-show="false"
        data-zan="shou"
      >
        <div class="icon icon1" style="display: none">
          <img src="../../assets/images/icons/shoucang1.png" alt="" />
        </div>
        <div class="icon icon2">
          <img src="../../assets/images/icons/shoucang.png" alt="" />
        </div>
        <div class="pinglun">收藏</div>
      </div>

 // 点赞
  $(document).on("click", ".dianzan", function (e) {
    e.stopPropagation();
    let data = $(this).attr("data-show");
    data = !JSON.parse(data);
    $(this).attr("data-show", data);
    if (JSON.parse($(this).attr("data-show")) == false) {
      // $(this).attr('data-show', 'true');
      $(this).children(".icon1").css("display", "none");
      $(this).children(".icon2").css("display", "block");
      $(this).children(".pinglun").removeClass("pinglun1");
      if ($(this).attr("data-zan") == "zan") {
        toast("取消点赞！", 1000);
      } else {
        toast("取消收藏！", 1000);
      }
    } else {
      // $(this).attr('data-show', 'true');
      $(this).children(".icon1").css("display", "block");
      $(this).children(".icon2").css("display", "none");
      $(this).children(".pinglun").addClass("pinglun1");
      if ($(this).attr("data-zan") == "zan") {
        toast("点赞成功！", 1000);
      } else {
        toast("收藏成功！", 1000);
      }
    }
    // $(this).children(".");
  });
  // 轻提示
  function toast(text, time) {
    let toast = document.getElementById("toast");
    let toast_box = document.getElementsByClassName("toast_box")[0];
    toast.innerHTML = text;
    toast_box.style.animation = "show 1.5s";
    toast_box.style.display = "inline-block";
    setTimeout(function () {
      toast_box.style.animation = "hide 1.5s";
      setTimeout(function () {
        toast_box.style.display = "none";
      }, 1400);
    }, time);
  }