클릭 시 변하는 스크립트 중복 사용일때요~ 채택완료
홀로그램웹
2년 전
조회 1,277
제가 구현하고 싶은건
비스포크 냉장고 처럼 클릭시 왼쪽 오른쪽 컬러가 바뀌는 거거든요~
그래서 알아본게 썸네일 갤러리 형태구요
간단한?스크립트가 있는데 중복 사용이 안되더라구요
같은 스크립트도 한 공간안에서 중복 사용하고 싶은데 어떻게 짜야할까요?
지금 하고 있는 스크립트 첨부합니다~
</p>
<p><style>
#container{margin-bottom: 80px;}
#photo{
display: block;
width: 960px;
border: 10px solid black;
margin: 0 auto;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
}
#gallery{text-align: center;}
#gallery > li {
display: inline-block;
margin: 0 10px;
}
#gallery > li > img{
display: block;
width: 200px;
border: 5px solid black;
cursor: pointer;
}</p>
<p>
#photo2{
display: block;
width: 960px;
border: 10px solid black;
margin: 0 auto;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
}
#gallery2{text-align: center;}
#gallery2 > li {
display: inline-block;
margin: 0 10px;
}
#gallery2 > li > img{
display: block;
width: 200px;
border: 5px solid black;
cursor: pointer;
}</p>
<p></style></p>
<p>
<div id="container">
<img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo" id="photo">
</div>
<ul id="gallery">
<li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="thumbnail"></li>
<li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> alt="thumbnail"></li>
<li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> alt="thumbnail"></li>
</ul></p>
<p>
<div id="container">
<img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo2" id="photo2">
</div>
<ul id="gallery2">
<li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="thumbnail"></li>
<li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> alt="thumbnail"></li>
<li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> alt="thumbnail"></li>
</ul></p>
<p>
<script>
var photo = document.getElementById("photo");
var thumbnail = document.querySelectorAll("#gallery > li > img");
for ( var i = 0; i < thumbnail.length; i++ )
thumbnail[i].addEventListener("click", function () {
photo.setAttribute("src", this.getAttribute("src"));
});
</script>
</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
<div id="galleryWrap">
<div id="container">
<img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo" id="photo">
</div>
<ul id="gallery">
<li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> data-thumb-target="photo" alt="thumbnail"></li>
<li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> data-thumb-target="photo" alt="thumbnail"></li>
<li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> data-thumb-target="photo" alt="thumbnail"></li>
</ul></p>
<p> <div id="container">
<img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo2" id="photo2">
</div>
<ul id="gallery2">
<li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> data-thumb-target="photo2" alt="thumbnail"></li>
<li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> data-thumb-target="photo2" alt="thumbnail"></li>
<li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> data-thumb-target="photo2" alt="thumbnail"></li>
</ul>
</div>
<script>
let thumbnails = document.querySelectorAll("#galleryWrap li > img");</p>
<p> for ( var i = 0; i < thumbnails.length; i++ )
thumbnails[i].addEventListener("click", function (e) {
let bigPhotoId = e.currentTarget.dataset.thumbTarget? e.currentTarget.dataset.thumbTarget : 'photo';
document.querySelector(`#${bigPhotoId}`).setAttribute("src", this.getAttribute("src"));</p>
<p> });
</script></p>
<p> </p>
<p>이렇게 이미지에 dataset으로 타겟 설정해서 하면 되지 않을가요?
간략한 코드는 다음분께 패스~~ ㅋ
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
홀로그램웹
2년 전
됬어요됬어요!!~~~감사합니다~~~
댓글을 작성하려면 로그인이 필요합니다.
2년 전
</p>
<p> </p>
<p> </p>
<p><style></p>
<p> .container{margin-bottom: 80px;}</p>
<p> .photo{</p>
<p> display: block;</p>
<p> width: 960px;</p>
<p> border: 10px solid black;</p>
<p> margin: 0 auto;</p>
<p> box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);</p>
<p> }</p>
<p> .gallery{text-align: center;}</p>
<p> </p>
<p> .gallery > li {</p>
<p> display: inline-block;</p>
<p> margin: 0 10px;</p>
<p> }</p>
<p> </p>
<p> .gallery > li > img{</p>
<p> display: block;</p>
<p> width: 200px;</p>
<p> border: 5px solid black;</p>
<p> cursor: pointer;</p>
<p> }</p>
<p> </p>
<p> </style></p>
<p> </p>
<p> <div class="gallery-wrap"></p>
<p> <div class="container"></p>
<p> <img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo" class="photo"></p>
<p> </div></p>
<p> </p>
<p> <ul class="gallery"></p>
<p> <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="thumbnail"></li></p>
<p> <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> alt="thumbnail"></li></p>
<p> <li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> alt="thumbnail"></li></p>
<p> </ul></p>
<p> </p>
<p> </div></p>
<p> </p>
<p> <div class="gallery-wrap"></p>
<p> <div class="container"></p>
<p> <img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo2" class="photo"></p>
<p> </div></p>
<p> </p>
<p> <ul class="gallery"></p>
<p> <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="thumbnail"></li></p>
<p> <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> alt="thumbnail"></li></p>
<p> <li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> alt="thumbnail"></li></p>
<p> </ul></p>
<p> </div></p>
<p> </p>
<p> <script></p>
<p> var thumbnails = document.querySelectorAll(".gallery > li > img");</p>
<p> // console.log(thumbnails);</p>
<p> thumbnails.forEach(function(thumbnail){ // 배열(thumbnails)의 갯수만큼 반복문 실행, (thumbnail)은 반복문 안에서 해당하는 객체. </p>
<p> // console.log(thumbnail);</p>
<p> thumbnail.addEventListener("click", function(){</p>
<p> console.log(this);</p>
<p> </p>
<p> var galleryWrap = thumbnail.parentElement.parentElement.parentElement; // li -> ul -> .gallery-wrap 찾음.</p>
<p> var fullPhoto = galleryWrap.querySelector(".photo");</p>
<p> </p>
<p> fullPhoto.setAttribute("src", this.getAttribute("src"));</p>
<p> </p>
<p> </p>
<p> })</p>
<p> })</p>
<p> </script></p>
<p> </p>
<p> </p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인