Javascript 当一个单击事件发生在另一个元素上时，取消上一个单击事件对一个元素的影响

我在一些需要帮助的普通JavaScript方面遇到了问题。我知道这个问题的标题似乎是其他问题的双重名称，但我相信我的问题可能有一点扭曲，导致我要么困惑，要么走错了思路。以下是我将如何提出我的问题

首先，我将描述这个问题，并提供一个指向相关页面的临时链接。这是我的投资组合网站。。。我想开始寻找一个初级前端开发人员的职位

第二，我将简要介绍一些研究和我对如何找到解决方案的看法

第三，我将为我试图解决的问题提供代码

****一个重要的提示——我坚信“教一个人钓鱼，而不是给他一条鱼”的哲学，因此，如果你有一个解决方案，请你解释一下它为什么有效，或者给我指一些参考资料，让我阅读一下

（1）问题说明------------------------------------------>

在我为自己构建的公文包网站的“项目页面”上，我试图让它成为这样，当你点击我完成的项目的图像时，它会在屏幕的一侧显示一块关于该项目的描述性文本

如果要单击另一个项目图像，则已显示的文本块将消失，新的文本块将出现在相同的位置

我已经设法想出了一个代码，在单击项目图像时显示文本块，但由于上一个文本块没有消失，因此在单击新项目图像时，文本块彼此堆叠在一起

以下是有关页面的临时链接：[

（2）我对解决方案的研究和思考------------------------------->

我做过谷歌搜索，并查看了一些建议的堆栈溢出帖子，这些帖子是在我键入我发布的这个问题的标题时出现的。我能找到的最接近我的情况是：[

我尝试应用第一个非常雄辩的解决方案提供的概念。我甚至在W3Schools上查找了Array map（）方法，因为我不熟悉它。这篇文章如下：

在试图解决这个问题时，我的思路如下：

使用querySelector按类获取所有项目图像，并将它们放入数组中

向数组中启用“函数X”的项目添加“单击”事件侦听器

“函数X”将相应文本块的css“显示”属性从“无”更改为“块”

使用if语句查看是否有任何其他文本块显示为“block”，然后在条件为真时将其更改为“display”为“none”

（3）代码----------------->

我在下面提供了我正在使用的代码。请注意，我在我的JavaScript代码中包含了我解决问题的一次尝试，该代码已被注释掉并标记为“我的一次解决方案尝试”。我觉得我是最接近解决问题的尝试

HTML

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） 结论----------------->

---

感谢您为我提供的一切帮助，如果有任何问题我可以回答，或者您可能需要查看其他代码以更好地查看任何关系，请告诉我。

第一个问题是，在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;
    });
});

---

第一个问题是在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;
    });
});

---

这个问题是由Jeff在评论中回答的。我发布这个答案只是为了分享实际工作的最终代码。基本上，Jeff的答案是正确的。但是，有几个小错误，一个“getElementById”不是一个函数“我在Chrome Developer Tools上收到错误消息。下面是最终有效的代码。这一切都归功于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;
    });
});

---

Jeff在评论中回答了这个问题。我发布这个答案只是为了分享实际工作的最终代码。基本上，Jeff的答案是正确的。但是，有几个小错误和“getElementById不是函数”错误消息：我在使用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;
    });
});

---

只需从domHey user7951676中删除旧文本。感谢您的建议。实际上我已经想到了这一点，但问题是每个文本块（div）还包括一个独特的按钮，它将带您访问文本所描述的实际网站。这些按钮尚未激活，因为我仍在该网站上工作。当您删除文本并销毁它时，事件侦听器将被删除。只需从domHey用户7951676中删除旧文本。感谢您的建议。实际上，我已经应该是这样的，但问题是每个文本块（div）还包括一个唯一的按钮，它将带您到文本所描述的实际网站。这些按钮还没有激活，因为我仍在该网站上工作。当您删除文本并销毁它时，事件侦听器将被删除，只是看到并修复了它。而