#javascript #click #addeventlistener
#javascript #нажмите #addeventlistener
Вопрос:
как я могу выполнить несколько щелчков с помощью eventlistener в разных классах, чтобы он создавал show hidde. но когда я пробую его во время изучения, он может отображать только 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 элемент не для каждого подразделения
Комментарии:
1. Пожалуйста, сократите свой код только до соответствующих частей. Что именно представляет собой элемент, на который вы пытаетесь щелкнуть несколько раз?
2. Я хочу щелкнуть ProjectIcon-больше кода и отобразить ProjectInfo активным, когда я нажимаю и появляется per-div
Ответ №1:
Каждое прикрепленное событие щелчка обрабатывается document.querySelector('.projectInfo') — поэтому не имеет значения, на что .projectIcon-more вы нажимаете, вы добавляете .active ко ВСЕМ элементам с .projectInfo помощью class . (и удаление .active класса из всех projectIcon-close элементов document )
Используйте идентификаторы, чтобы убедиться, что он добавляет класс .active к нужному элементу.
Дайте элементу щелкнуть для получения дополнительной информации id="project-1-more"
Целевой элемент может получить id="project-1-more-info"
Таким образом, вы можете использовать идентификаторы в своем JS:
document.querySelector('#' this.id '-info').classList.add('active');
Использование this связано с тем, что вы перебираете элементы и this означает фактический элемент.
Для закрытия вы можете добавить класс project-1-close к элементу, который должен быть закрыт. (у него уже есть идентификатор)
И добавьте идентификатор id="project-1-close" к элементу, в который вы добавляете событие щелчка.
Таким образом, вы можете использовать это в своем JS для закрытия:
document.querySelector('.' this.id).classList.remove('active');
Таким образом, вы используете идентификатор элемента click-to-close, чтобы закрыть элемент с классом, который совпадает с идентификатором.
HTML:
<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>
JS:
var tombol = document.querySelectorAll('.projectIcon-more');
for(var i = 0; i < tombol.length; i ){
tombol[i].addEventListener('click',function(e){
document.querySelector('#' this.id '-info').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('.' this.id).classList.remove('active');
});
}
Смотрите Скрипку: https://jsfiddle.net/0wnefjmz/1 /