我遇到了一些需要帮助的vanilla JavaScript问题。我知道这个问题的标题可能看起来像是其他人的两倍，但我相信我的问题可能会有轻微的转折，导致我要么被困惑，要么遵循错误的思维方式。以下是我将如何呈现我的问题...
第一 - 我将描述该问题，并提供相关页面的临时链接。这是我的投资组合网站......我想开始寻找初级前端开发人员的职位。
第二 - 我将简要介绍一些研究以及我对如何找到解决方案的看法。
第三 - 我将提供我正在尝试解决的问题的代码。
****一个重要的注意事项 - 我坚信“教一个人钓鱼，而不是给他一条鱼”的理念，所以如果你有解决方案，请你解释为什么它有效或指向我参考资料，以便我可以阅读它？
（1）问题描述-----------------------------------＆gt; < /强>
在我为自己构建的投资组合网站的“项目页面”上，我正在尝试这样做，以便当您点击我所完成的项目的图像时，它会显示一块描述性文本该项目位于屏幕的一侧。
如果您要点击另一个项目图像，则已经显示的文本块将消失，并且新的文本块将出现在同一位置。
我已经设法在单击项目图像时显示显示文本块的代码，但由于前一个文本块没有消失，因此当新项目图像为时，文本块会堆叠在一起。点击。
以下是相关网页的临时链接：[http://s9m00001.site/projects.html][1]
（2）我的研究和思考解决方案--------------------------＆gt;
我已经完成了Google搜索，并检查了一些建议的堆栈溢出帖子，这些帖子在我输入我要发布的此问题的标题时出现。我能找到的最接近我的情况是：{Remove changes from one element when event occurs on another element?
我试图应用那个雄辩的第一个解决方案提供的概念。我甚至在W3Schools上查找了Array map（）方法，因为我对它并不熟悉。那篇文章在这里：https://www.w3schools.com/jsref/jsref_map.asp
在尝试解决问题时，我的思路如下：
（3）CODE --------------------＆gt;
我正在提供我正在使用的代码。请注意，我已经在我的JavaScript代码中包含了我尝试解决该问题的一个尝试，该代码已被注释掉并标记为“我的解决方案之一”。这是我觉得自己最接近解决问题的尝试。
HTML
<!-- MAIN -->
<div id="upper-project-container">
<!-- Golden Glow Investigative & Protective Services -->
<div class="project-text-left" id="proj-des1">
<h4 class="project-tech">Golden Glow Investigative & Protective Services</h4>
<p class="white-text-two">I have built and maintained the various iterations of the website for this company since 2004, using either Adobe Dreamweaver or proprietary contact management systems. But this redesign project required a much more intimate knowledge of coding than previously needed and a finished product within only 2 days.
</p>
<p class="white-text-two">The needs of this project presented me with the opportunity to use a template and work with source code that was written by someone other than myself, which was something I had not done up until that point.
</p>
<p class="white-text-two">The template came from https://html5up.net/spectral and I modified or restructured appropriate aspects of the code to produce a finished product that fit the client’s needs.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">June, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="golden-glow">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Jay Hunt Designs -->
<div class="project-text-left" id="proj-des2">
<h4 class="project-tech">Jay Hunt Designs</h4>
<p class="white-text-two">Jasmine Hunter is a fashion designer that I met at my local Panera Bread restaurant (I have obtained 3 of my clients from hanging out there!). Miss Hunter wanted a site that had a clean and simple design, but was elegant and utilized the colors black, white, silver and gold.
</p>
<p class="white-text-two">The challenge I was faced with in order to complete this project had to do with the cross browser compatibility of the auto scrolling feature I built into the homepage of the site. I do the testing of my builds on Chrome, Safari, Firefox, Edge, and Opera. The auto scrolling feature worked on all of those browsers except for Firefox.
</p>
<p class="white-text-two">After researching the issue through Google searches I finally found a solution that took care of the issue.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">April, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="jay-hunt">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Goodie Treats -->
<div class="project-text-left" id="proj-des3">
<h4 class="project-tech">Goodie Treats</h4>
<p class="white-text-two">The focus of the Goodie Treats organization is to build the self esteem of minority children, girls in particular, through various activities and events. The request of the client was that I made the entire homepage function as the initial menu for the site and also that it featured images from some of their events, but they wanted the rest of the site to be a simple design that featured big background images.
</p>
<p class="white-text-two">The challenging homepage request from the client provided me with an opportunity to explore using a responsive grid system to build the home page. Building the site’s homepage to spec allowed me to grasp the basic concepts and usefulness of using a grid, as well as experiment with its responsiveness to various screen sizes.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">March, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="goodie-treats">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Rapture Guns -->
<div class="project-text-left" id="proj-des4">
<h4 class="project-tech">Rapture Guns & Knives</h4>
<p class="white-text-two">During a visit to a local gun store for some target ammo, I overheard the store owner that he was in need of a website but didn’t have the knowledge on how to do it. I took that opportunity to introduce myself and shortly afterwards he became my client.
</p>
<p class="white-text-two">Because the majority of his customers were over the age of 50, the client wanted a very simple site that would appeal to the “nothing fancy” character of his customer base and that was modelled after the website for Gunsmoke Guns (now closed) out of Wheat Ridge, Colorado.
</p>
<p class="white-text-two">The challenge that I had in building this website had to do more with content than it did with any technical obstacles. I had to compose all of the copy for the website based on a recorded interview I conducted with the owner.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">January, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="goodie-treats">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Brackets (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
</div>
<div class="project-text-right" id="proj-des1">
</div>
<div id="lower-project-container">
<h3 id="project-heading">projects</h3>
<div class="project-col" id="project01">
<img src="images/project1.jpg" class="project-" id="des1" alt="golden-glow-security-website">
</div>
<div class="project-col" id="project02">
<img src="images/project2.jpg" class="project-" id="des2" alt="jay-hunt-designs-website">
</div>
<div class="project-col" id="project03">
<img src="images/project3.jpg" class="project-" id="des3" alt="goodie-treats-website">
</div>
<div class="project-col" id="project04">
<img src="images/project4.jpg" class="project-" id="des4" alt="rapture-guns-website">
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="scripts/main.js"></script>
</body>
</html>
CSS
/* ========== PROJECTS PAGE ========== */
.wrapper#projects {
background: url(../images/bg02.jpg)fixed no-repeat center;
background-size: cover;
overflow: hidden;
}
#upper-project-container {
width: 100%;
height: 58%;
}
ul.tech-list {
margin-left: 40px;
}
ul.tech-list li {
list-style-type: disc;
font-family: 'Open Sans', sans-serif;
font-size: .8rem;
line-height: .95rem;
color: #ffffff;
}
.project-text-left {
position: absolute;
top: 10%;
left: 4%;
width: 720px;
height: 400px;
}
.project-text-left#proj-des1 {
display: none;
}
.project-text-left#proj-des2 {
display: none;
}
.project-text-left#proj-des3 {
display: none;
}
.project-text-left#proj-des4 {
display: none;
}
.project-text-right {
position: absolute;
top: 10%;
right: 4%;
width: 720px;
height: 400px;
display: none;
}
.show {
display: block;
}
#lower-project-container{
width: 100%;
height: 45%;
}
.project-col {
width: 25%;
margin-top: 20px;
text-align: center;
float: left;
-webkit-transition: transform .4s;
-moz-transition: transform .4s;
-o-transition: transform .4s;
transition: transform .4s;
}
.project-col:hover {
transform: scale(1.1);
-webkit-transition: transform .4s;
-moz-transition: transform .4s;
-o-transition: transform .4s;
transition: transform .4s;
}
img {
max-width: 100%;
box-shadow: 24px 17px 44px rgba(0, 0, 0, .7);
cursor: pointer;
}
JAVASCRIPT
// ----- PROJECT PAGE
Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
/*var showProject = document.querySelectorAll('#lower-project-container .project-');
var siteDescr = document.querySelectorAll('.project-text-left');
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
project.style.display = 'block';
});
});
// ========== ONE OF MY SOLUTION ATTEMPTS ========
/* window.onload = function() {
var showProject = document.querySelectorAll('#lower-project-container .project-');
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
// If another project panel is visible, it is then hidden.
[].map.call(document.querySelectorAll('.project-text-left'), function(e) {
e.classList.remove('show'); // remove from all
});
this.classList.add('show'); // add on current
});
});
} */
（4）结论--------------------＆gt;
感谢您提供给我的任何帮助，如果有任何我可以回答的问题或者您可能需要查看的其他代码以便更好地了解任何关系，请告诉我。
答案 0 :(得分：2)
第一个问题是在main.js中你有一个不完整的评论块
// ----- PROJECT PAGE
Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
在单词Project
之前添加/ *// ----- PROJECT PAGE
/* Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
[编辑] 您可以添加另一个变量来跟踪是否已显示某些内容
var oldID = null;
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
if( oldID != null ) {
document.getELementByID('proj-"+oldID).style.display = "none";
}
project.style.display = 'block';
//--- save current id
oldID - e.target.id;
});
});
答案 1 :(得分：0)
杰夫在评论中回答了这个问题。我只发布这个答案来分享实际工作的最终代码。从本质上讲，杰夫的答案是正确的。然而，有一些小错字和＆＃34; getElementById不是一个函数＆＃34;我在使用Chrome开发者工具时收到错误消息。最终的代码如下。所有的功劳都归功于Jeff。请注意我在Jeff提供的内容和最终工作版本之间做了很小的改动。我希望这可以帮助将来有类似问题的人！这是最终的工作代码：
// ----- PROJECT PAGE
/*Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
var showProject = document.querySelectorAll('#lower-project-container .project-');
var siteDescr = document.querySelectorAll('.project-text-left');
var oldID = null;
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
if( oldID != null ) {
document.querySelector('#proj-'+ oldID).style.display = "none";
}
project.style.display = 'block';
//--- save current id
oldID = e.target.id;
});
});