如果里面有查询选择器,我如何优化这些重复的内容?

问题描述 投票:0回答:1

我需要简化这些反应代码行,我发现有点重复,但我不知道是否有任何方法可以改进这一点
任何想法都会收到!!!

useEffect(() => {
    document.addEventListener("scroll", () => {
      // Prices
      if(document.querySelector("#prices").getBoundingClientRect().top == 78){
        document.querySelector(".pricesArr").style.opacity = 1
        document.querySelector(".pricesArr").classList.add("pricesArrAnim")
      }
      else if(document.querySelector("#prices").getBoundingClientRect().top > 660){
        document.querySelector(".pricesArr").style.opacity = 0
        document.querySelector(".pricesArr").classList.remove("pricesArrAnim")
      }
      // Contact
      if(document.querySelector("#contact").getBoundingClientRect().top == 78){
        document.querySelector(".contact").style.opacity = 1
        document.querySelector(".contact").classList.add("contactAnim")
      }
      else if(document.querySelector("#contact").getBoundingClientRect().top > 660){
        document.querySelector(".contact").style.opacity = 0
        document.querySelector(".contact").classList.remove("contactAnim")
      }
      // Moreinfo
      if(document.querySelector("#moreinfo").getBoundingClientRect().top == 78){
        document.querySelector(".moreinfo").style.opacity = 1
        document.querySelector(".moreinfo").classList.add("moreinfoAnim")
      }
      else if(document.querySelector("#moreinfo").getBoundingClientRect().top > 660){
        document.querySelector(".moreinfo").style.opacity = 0
        document.querySelector(".moreinfo").classList.remove("moreinfoAnim")
      }
    })
  })
javascript html css reactjs if-statement
1个回答
0
投票

除非您计划添加一大堆,否则无需过早优化,否则一些 if else 语句没有任何问题。但是,如果您要添加更多案例,您可以执行以下操作(未经测试):

useEffect(() => {
  document.addEventListener("scroll", () => {
    const select = document.querySelector;
    [
      { idEl: select("#prices"), classEl: select(".pricesArr"), newClass: "pricesArrAnim" },
      { idEl: select("#contact"), classEl: select(".contact"), newClass: "contactAnim" },
      { idEl: select("#moreinfo"), classEl: select(".moreinfo"), newClass: "moreinfoAnim" }
    ].forEach(obj => {
      if(obj.idEl.getBoundingClientRect().top == 78){
        obj.classEl.style.opacity = 1
        obj.classEl.classList.add(obj.newClass)
      }
      else if(obj.idEl.getBoundingClientRect().top > 660){
        obj.classEl.style.opacity = 0
        obj.classEl.classList.remove(obj.newClass)
      }
    });

  })
})

因此,在这种情况下,如果您想添加另一个案例,只需使用您需要的

idEl
classEl
newClass
将另一个对象添加到数组中,它也会这样做。一行添加另一个案例。

© www.soinside.com 2019 - 2024. All rights reserved.