Javascript 使用相同的按钮返回

我有一些javascript/CSS隐藏/显示内容和一些动画。就功能而言，它运行得非常好，没有任何问题，但是，我想添加一个功能，在这个功能中，我单击运行脚本的相同图片/按钮可以再次用于反向运行相同的脚本，以返回到原始状态。请参阅下面的代码

/* Portfolio */

    .portfolio {
      grid-area: portfolio;
      width: 100%;
    }

    .portfolio {
        display: grid;
        background: #F1F1F1;
        grid-template-rows: repeat(1, 100%);
        grid-gap: 10px;
         grid-template-areas: "portfolio-header";
        align-items: start;
        text-align: center;
        min-height: 1000px; 
    }

    .portfolio-header {
        width: 100%;
        text-align: center;
        margin-top: 64px;
        margin-bottom: -300px;

    }

    .portfolio-container {
        min-height: 500px; /* temporary */
        padding: 0 20px;
        position: relative;
    }
    .portfolio-container .portfolio-picture {
        left: 0;
        position: absolute;
        transition: all ease-in .3s; /* MAGIC */
        top: 0;
        width: 25%;
    }
    .portfolio-container .portfolio-picture img {
        max-width: 100%;
    }
    .portfolio-container .portfolio-picture.portfolio-picture-1 {}
    .portfolio-container.portfolio-active-2 .portfolio-picture-1,
    .portfolio-container.portfolio-active-3 .portfolio-picture-1,
    .portfolio-container.portfolio-active-4 .portfolio-picture-1,
    .portfolio-container.portfolio-active-1 .portfolio-picture-2,
    .portfolio-container.portfolio-active-3 .portfolio-picture-2,
    .portfolio-container.portfolio-active-4 .portfolio-picture-2,
    .portfolio-container.portfolio-active-1 .portfolio-picture-3,
    .portfolio-container.portfolio-active-2 .portfolio-picture-3,
    .portfolio-container.portfolio-active-4 .portfolio-picture-3,
    .portfolio-container.portfolio-active-1 .portfolio-picture-4,
    .portfolio-container.portfolio-active-2 .portfolio-picture-4,
    .portfolio-container.portfolio-active-3 .portfolio-picture-4 {
        opacity: 0;
        pointer-events: none;

    }
    .portfolio-container .portfolio-picture.portfolio-picture-2 { transform: translate(100%,0); }
    .portfolio-container .portfolio-picture.portfolio-picture-3 { transform: translate(200%,0); }
    .portfolio-container .portfolio-picture.portfolio-picture-4 { transform: translate(300%,0); }
    .portfolio-container .portfolio-content {
        box-sizing: border-box;
        opacity: 0;
        padding-left: 30px;
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(0,100%);
        transition: all ease-in .3s; /* MAGIC */
        width: 75%;

    }

    .portfolio-container.portfolio-active-2 .portfolio-picture.portfolio-picture-2,
    .portfolio-container.portfolio-active-3 .portfolio-picture.portfolio-picture-3,
    .portfolio-container.portfolio-active-4 .portfolio-picture.portfolio-picture-4 {
        transform: translate(0,0);
    }


    .portfolio-container.portfolio-active-1 .portfolio-content.portfolio-content-1,
    .portfolio-container.portfolio-active-2 .portfolio-content.portfolio-content-2,
    .portfolio-container.portfolio-active-3 .portfolio-content.portfolio-content-3,
    .portfolio-container.portfolio-active-4 .portfolio-content.portfolio-content-4 {
        opacity: 1;
        pointer-events: auto;
        transform: translate(0,0);
    }

    .portfolio-back-button { 
        display: none; 
    }
    .portfolio-back-button.portfolio-back-button-visible { 
        display: inline-block; 
    }

    .port-content {
        text-align: center;
    }


    .port-cont {
        max-width: 35%;
        text-align: justify;
        background-image: url("assets/img/pattern.png");
        color: #808080;
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 40%;
        padding: 10px;
        margin-bottom: 50px;
        box-sizing: border-box;

    }

    function clearSelection() {
    document.querySelector('.portfolio-container').classList.remove('portfolio-active-1', 'portfolio-active-2', 'portfolio-active-3', 'portfolio-active-4');
    document.querySelector('.portfolio-back-button').classList.remove('portfolio-back-button-visible');
}
function selectPortfolio(which) {
    clearSelection();
    document.querySelector('.portfolio-container').classList.add('portfolio-active-' + which);
    document.querySelector('.portfolio-back-button').classList.add('portfolio-back-button-visible');
}

     <div  class="portfolio-container">

          <div class="portfolio-content portfolio-content-1 port-cont">
              <p>some text</p>
          </div>

          <div class="portfolio-content portfolio-content-2 port-cont">      
            <p>some text</p>
          </div>

          <div class="portfolio-content portfolio-content-3 port-cont">
            <p>some text</p>
          </div>

          <div class="portfolio-content portfolio-content-4 port-cont">
            <p>some text</p>
          </div>

          <div class="portfolio-picture portfolio-picture-1">
            <a href="#porfolio" onclick="selectPortfolio(1)"><img src="assets/img/portfolio/corinthmc/corinthmc_small.png" alt="Corinth Designs"></a>
          </div>

          <div class="portfolio-picture portfolio-picture-2">
            <a href="#porfolio" onclick="selectPortfolio(2)"><img src="assets/img/portfolio/beardedrazorback/beardedrazorback_small.png" alt="Corinth Designs"></a>
          </div>

          <div class="portfolio-picture portfolio-picture-3">
            <a href="#porfolio" onclick="selectPortfolio(3)"><img src="assets/img/portfolio/theord/theord_small.png" alt="Corinth Designs"></a>
          </div>

          <div class="portfolio-picture portfolio-picture-4">
            <a href="#porfolio" onclick="selectPortfolio(4)"><img src="assets/img/portfolio/21divine/21divine_small.png" alt="Corinth Designs"></a>
          </div>

            <div class="port-back portfolio-back-button">
            <a href="#work" onclick="clearSelection()">Back <i class="fas fa-angle-double-right"></i></a>
          </div><!-- back button -->

/*公文包*/
.投资组合{
网格区域：投资组合；
宽度：100%；
}
.投资组合{
显示：网格；
背景#f1f1；
网格模板行：重复（1100%）；
栅隙：10px；
网格模板区域：“投资组合标题”；
对齐项目：开始；
文本对齐：居中；
最小高度：1000px；
}
.投资组合标题{
宽度：100%；
文本对齐：居中；
利润上限：64px；
边缘底部：-300px；
}
.公文包容器{
最小高度：500px；/*临时*/
填充：0 20px；
位置：相对位置；
}
.公文包容器.公文包图片{
左：0；
位置：绝对位置；
过渡：所有的易用.3s；/*魔术*/
排名：0；
宽度：25%；
}
.portfolio容器.portfolio图片img{
最大宽度：100%；
}
.portfolio容器.portfolio-picture.portfolio-picture-1{}
.portfolio-container.portfolio-active-2.portfolio-picture-1，
.portfolio-container.portfolio-active-3.portfolio-picture-1，
.portfolio-container.portfolio-active-4.portfolio-picture-1，
.portfolio-container.portfolio-active-1.portfolio-picture-2，
.portfolio-container.portfolio-active-3.portfolio-picture-2，
.portfolio-container.portfolio-active-4.portfolio-picture-2，
.portfolio-container.portfolio-active-1.portfolio-picture-3，
.portfolio-container.portfolio-active-2.portfolio-picture-3，
.portfolio-container.portfolio-active-4.portfolio-picture-3，
.portfolio-container.portfolio-active-1.portfolio-picture-4，
.portfolio-container.portfolio-active-2.portfolio-picture-4，
.portfolio-container.portfolio-active-3.portfolio-picture-4{
不透明度：0；
指针事件：无；
}
.portfolio容器.portfolio-picture.portfolio-picture-2{transform:translate（100%，0）；}
.portfolio容器.portfolio-picture.portfolio-picture-3{transform:translate（200%，0）；}
.portfolio容器.portfolio-picture.portfolio-picture-4{transform:translate（300%，0）；}
.portfolio容器.portfolio内容{
框大小：边框框；
不透明度：0；
左侧填充：30px；
位置：绝对位置；
右：0；
排名：0；
转化：翻译（0100%）；
过渡：所有的易用.3s；/*魔术*/
宽度：75%；
}
.portfolio-container.portfolio-active-2.portfolio-picture.portfolio-picture-2，
.portfolio-container.portfolio-active-3.portfolio-picture.portfolio-picture-3，
.portfolio-container.portfolio-active-4.portfolio-picture.portfolio-picture-4{
变换：平移（0,0）；
}
.portfolio-container.portfolio-active-1.portfolio-content.portfolio-content-1，
.portfolio-container.portfolio-active-2.portfolio-content.portfolio-content-2，
.portfolio-container.portfolio-active-3.portfolio-content.portfolio-content-3，
.portfolio-container.portfolio-active-4.portfolio-content.portfolio-content-4{
不透明度：1；
指针事件：自动；
变换：平移（0,0）；
}
.portfolio后退按钮{
显示：无；
}
.portfolio-back-button.portfolio-back-button-visible{
显示：内联块；
}
.端口内容{
文本对齐：居中；
}
.port cont{
最大宽度：35%；
文本对齐：对齐；
背景图片：url（“assets/img/pattern.png”）；
颜色：#808080；
字体大小：粗体；
文本转换：大写；
右边距：40%；
填充：10px；
边缘底部：50px；
框大小：边框框；
}
函数{
document.querySelector（'.portfolio container'）.classList.remove（'portfolio-active-1'，'portfolio-active-2'，'portfolio-active-3'，'portfolio-active-4'）；
document.querySelector（'.portfolio back button'）.classList.remove（'portfolio-back-button-visible'）；
}
功能选择组合（哪个）{
选举（）；
document.querySelector（'.portfolio container'）.classList.add（'portfolio-active-'+which）；
document.querySelector（'.portfolio back button'）.classList.add（'portfolio-back-button-visible'）；
}
一些文本

一些文本

一些文本

一些文本

如果将

selectPortfolio

函数修改为以下内容，则可以使用闭包和内部状态变量来回切换

---

您可以通过javascript在元素的类之间添加/切换，然后将不同的css逻辑应用于这些类。这可能是最简单的方法。如果（y类）删除y类并添加x类，则执行if（y类）删除x类并添加y类。如果（x类）删除x类并添加y类，则执行if（y类）删除y类并添加x类。谢谢，这是一个好主意。非常感谢。如果我有任何问题，我会回来的。

const selectPortfolio = (() => {
  let back = false;

  return (which) => {
    // clearSelection();

    if (back) {
      // document.querySelector('.portfolio-back-button').classList.add('portfolio-back-button-visible');
      console.log(back, 'portfolio-back-button-visible');
    } else {
      // document.querySelector('.portfolio-container').classList.add('portfolio-active-' + which);
      console.log(back, 'portfolio-active-');
    }

    back = !back;
  }    

  return back;
})();

selectPortfolio();
selectPortfolio();
selectPortfolio();
selectPortfolio();

// true "portfolio-back-button-visible"
// false "portfolio-active-"
// true "portfolio-back-button-visible"
// false "portfolio-active-"