Javascript 事件侦听器单击多个

Question

如何在不同的类中使用 eventlistener 进行多次点击，以便它产生一个显示隐藏。但是当我在学习时尝试它只能显示1个项目，而不是多个。

我尝试使用 javascript 而不是 jquery，因为我正在学习纯 javascript 并且我对在不同的类上进行多次点击感到困惑，或者准确地说是使用 2 个类来进行点击和显示

var tombol = document.querySelectorAll('.projectIcon-more');
for(var i = 0; i < tombol.length; i++){
    tombol[i].addEventListener('click',function(e){
        document.querySelector('.projectInfo').classList.add('active');
    })
}
var tombol = document.querySelectorAll('.projectIcon-close');
for(var i = 0; i < tombol.length; i++){
    tombol[i].addEventListener('click',function(e){
        document.querySelector('.projectInfo').classList.remove('active');
    })
}

*{box-sizing:border-box}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible;border:0;outline:0;margin:0;}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;outline:none;}input{line-height:normal;border:0;outline:0}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}:focus{outline:none}h1{font-size:1.75em}iframe{width:100%}.visible,input[type="checkbox"]{display:none}details{display:block}summary{display:list-item}summary::-webkit-details-marker,.collapsible-title .chevron-up,.collapsible[open] .collapsible-title .chevron-down,.collapsible-title .chevron-down,.collapsible[open] .collapsible-title .chevron-up{display:none}summary::marker{display:none;list-style-type:none}summary::-webkit-details-marker{display:none;list-style-type:none}summary::-moz-list-bullet{display:none;list-style-type:none}details{background-color:#ededed;border-radius:5px;margin:1rem 0;padding:.75rem 1.25rem}summary{cursor:pointer;font-weight:600;list-style-type:none;outline:none}details[open] summary{border-bottom:1px solid #3f3f3f;padding-bottom:.75rem}h1, h2, h3, h4, h5{font-family:'Roboto', Arial, sans-serif;}
.lazyloaded{opacity:0;-webkit-transition:opacity 300ms;transition:opacity 300ms}.lazyloaded.shown{opacity:1}.blur-up{opacity:.3 !important;background:#d7dee0;border-radius:4px;overflow:hidden}
.screen-reader-text{border:0;height:0;position:absolute;width:0;top:0;overflow:hidden}.separator a {margin: 0 !important;}.clear{clear:both}
*,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}
::-webkit-scrollbar-track{background-color:transparent}
html{scroll-behavior:smooth}
svg{width:24px;height:24px;vertical-align:middle}
img{width:100%;height:100%;object-fit:cover}
a{text-decoration:none;outline:0;-webkit-transition:all .1s ease;transition:all .1s ease}
body{background: #eeeeee;color:#231E1E;font-family:-apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif;font-size:16px;font-weight:400;margin:0;padding:0}
            .projectCard{display:flex;flex-wrap:wrap;}
            .projectContent{width:100%;}
            .projectMain{position:relative;overflow:hidden;margin:5px;border:thin solid #eee;}
            .projectInfo{padding:24px;position:absolute;background-color:#fff;width:100%;overflow-y:auto;left:0;top:100%;height:100%;z-index:1;opacity:0;visibility:hidden;transform:translateY(0px);transition:all .3s ease-in-out;}
            .projectHeader{padding:10px;}
            .projectTitle,.projectInfo-title{display:flex;justify-content:space-between;align-items:center;}
            .projectLabel > *{font-size:0.9rem;display:inline-flex;background:#D8D8D8;margin-right:5px;margin-bottom:15px;border-radius:3px;padding:0 5px;}
            .projectLabel .finis{background:#4BB543;color:#fff;}
            .projectHeading h2{font-size:18px;margin:0;}
            .projectInfo.active{opacity:1;visibility:visible;transform:translateY(-100%);}
            .projectInfo-label > *{color:#7699C2;}
            @media screen and (min-width:800px){.projectContent{width:33.333%;}}

            <div class="projectCard">
                <div class="projectContent">
                    <div class="projectMain">
                        <div class="projectThumb"><img src="img/5.jpg" alt="Onimaru Theme"></div>
                        <div class="projectHeader">
                            <div class="projectLabel">
                                <span class='finis'>Finished</span>
                            </div>
                            <div class="projectTitle">
                                <div class="projectHeading"><h2>Project 1</h2></div>
                                <div class="projectIcon-more"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg></span></div>
                            </div>
                              <div class="projectLink"><a href='https://komagitsune.blogspot.com/' title='Website'>Website</a></div>
                            <div class="projectInfo hidden">
                                <div class="projectInfo-title">
                                    <div class="projectHeading"><h2>Project 1</h2></div>
                                    <div class="projectIcon-close"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></span></div>
                                </div>
                                <div class="projectInfo-label"><span>Development</span></div>
                                <div class="projectInfo-desc"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed autem maxime odit aliquam esse animi. Voluptatum, est saepe nisi assumenda odit autem, unde eum veritatis facere ad exercitationem fugiat..</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="projectContent">
                    <div class="projectMain">
                        <div class="projectThumb"><img src="img/4.jpg" alt="Onimaru Theme"></div>
                        <div class="projectHeader">
                            <div class="projectLabel">
                                <span class='finis'>Finished</span>
                            </div>
                            <div class="projectTitle">
                                <div class="projectHeading"><h2>Project 1</h2></div>
                                <div class="projectIcon-more"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg></span></div>
                            </div>
                              <div class="projectLink"><a href='https://fletbanget.blogspot.com/' title='Website'>Website</a></div>
                            <div class="projectInfo hidden">
                                <div class="projectInfo-title">
                                    <div class="projectHeading"><h2>Project 1</h2></div>
                                    <div class="projectIcon-close"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></span></div>
                                </div>
                                <div class="projectInfo-label"><span>Development</span></div>
                                <div class="projectInfo-desc"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil odio, nostrum quis labore deserunt recusandae aut asperiores ad laborum obcaecati ratione nesciunt quos optio consequatur beatae facilis voluptates porro corrupti..</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="projectContent">
                    <div class="projectMain">
                        <div class="projectThumb"><img src="img/3.jpg" alt="Onimaru Theme"></div>
                        <div class="projectHeader">
                            <div class="projectLabel">
                                <span class='finis'>Finished</span>
                            </div>
                            <div class="projectTitle">
                                <div class="projectHeading"><h2>Project 1</h2></div>
                                <div class="projectIcon-more"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg></span></div>
                            </div>
                              <div class="projectLink"><a href='https://anitoki.malestea.com/' title='Website'>Website</a></div>
                            <div class="projectInfo hidden">
                                <div class="projectInfo-title">
                                    <div class="projectHeading"><h2>Project 1</h2></div>
                                    <div class="projectIcon-close"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></span></div>
                                </div>
                                <div class="projectInfo-label"><span>Development</span></div>
                                <div class="projectInfo-desc"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate qui iste blanditiis consectetur in corrupti eos tenetur quo ea possimus dolorum necessitatibus, nesciunt, illo pariatur inventore odit? Harum, quasi earum.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

但是如果点击按钮只显示 1，如果点击其他同样只显示 1 个项目而不是每个 div

Answer 1

每个附加的点击事件句柄 class TextRecognitionController extends GetxController { RxString resultTxt = ''.obs; doTextRecog() async { final FirebaseVisionImage visionImage = FirebaseVisionImage.fromFile(_selectedFile); final VisionText visionText = await textRecognizer.processImage(visionImage); for (TextBlock block in visionText.blocks) { for (TextLine line in block.lines) { resultTxt.value += line.text + '\n'; } } print(resultTxt.value); // textRecognizer.close(); } } - 所以你点击哪个 document.querySelector('.projectInfo') 无关紧要，你将 .projectIcon-more 添加到 .active 类的所有元素。 （并从 .projectInfo 的所有 .active 元素中删除 projectIcon-close 类）

使用 id 来确保它将类 document 添加到正确的元素。
让元素点击查看更多.active
目标元素可以得到 id="project-1-more"
所以你可以在你的 JS 中使用 ID：

id="project-1-more-info"

使用 document.querySelector('#' + this.id + '-info').classList.add('active'); 是因为您正在循环遍历元素，而 this 表示实际元素。
对于关闭，您可以向应该关闭的元素添加一个类 this。 （已经有id了）
并将 id project-1-close 添加到您添加点击事件的元素。 所以你可以在你的 JS 中使用它来关闭：

id="project-1-close"

因此，您使用点击关闭元素的 id 来关闭具有与 id 相同的类的元素。

HTML：

document.querySelector('.' + this.id).classList.remove('active');

JS：

<div class="projectTitle">
    <div class="projectHeading"><h2>Project 1</h2></div>
    <div class="projectIcon-more" id="project-1-more">click for more</div>
</div>
<div class="projectLink">
    <a href='https://example.com/project-1' title='Website'>Website</a></div>
<div class="projectInfo project-1-close hidden" id="project-1-more-info">
    <div class="projectInfo-title">
        <div class="projectHeading"><h2>Project 1</h2></div>
        <div class="projectIcon-close" id="project-1-close">click to close</div>
    </div>
</div>

见小提琴：https://jsfiddle.net/0wnefjmz/1/