我有一些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 -->
答案 0 :(得分：0)
如果将selectPortfolio函数修改为以下内容，则可以使用闭包和内部状态变量来回切换。
https://codepen.io/anon/pen/gKbjQj?editors=0010
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-"