DOM的综合应用的例子--点击加一和减一

一个 综合操作

like 按钮点击事件，实现以下的效果

题目分析：1.点击按钮之后，添加has-like class，再次点击的时候（取消like），删除has-like class

2.点击按钮后，将数字加一，再次点击的时候，数字减一

首先 我们给按钮点击按钮添加事件，并且利用haslike变量表示是否喜欢

// 默认是未点击喜欢
let hasLike = false;

const likeBtn = document.querySelector(".like-btn");
likeBtn.addEventListener("click", function () {
    
    
  // 点击事件
  hasLike = !hasLike;
  console.log(hasLike);
});

点击后发现 控制太依次打出true和false，true，false……

根据haslike修改页面信息

// 默认是未点击喜欢
let hasLike = false;

const likeBtn = document.querySelector(".like-btn");
const likeBtnRight = likeBtn.querySelector(".right");
likeBtn.addEventListener("click", function () {
    
    
  // 点击事件
  hasLike = !hasLike;
  if (hasLike) {
    
    
    likeBtn.classList.add("has-like");
    likeBtnRight.innerHTML = parseInt(likeBtnRight.innerText.trim()) + 1;
  } else {
    
    
    likeBtn.classList.remove("has-like");
    likeBtnRight.innerHTML = parseInt(likeBtnRight.innerText.trim()) - 1;
  }
});

这样 就会显示上面的结果

我们再去做这个效果

监听三个点的按钮，点击控制就options区域的显示和隐藏，及display:block/none

代码如下

let showMore = false;
const moreBtn = document.querySelector(".workspace-item-more .select");
const morePanel = document.querySelector(".workspace-item-more .options");
moreBtn.addEventListener("click", function () {
    
    
  showMore = !showMore;

  // 控制morePanel的显示和隐藏
  if (showMore) {
    
    
    morePanel.style.display = "block";
  } else {
    
    
    morePanel.style.display = "none";
  }
});

快来自己试试吧