개요

jQuery를 사용하지 않고 구현하는 것을 목표로합니다.
동일한 구조를 갖는 요소가 복수 존재할 때, 그 중에서 이벤트가 발생한 형제 요소만을 조작하고 싶은 경우의 실장 방법이다.

구현 예

클릭하면 그 형제 요소에 해당하는 이미지를 작게하는 버튼을 구현. 이번에는 같은 구조의 요소를 4개 준비.

HTML과 CSS

참고 정도에 게재

HTML

<ul class="item-list">
    <li class="item-list__item">
        <img src="images/1.jpeg" alt="img1" class="img-op">
        <button class="popup-btn btn">look</button>
    </li>
    <li class="item-list__item">
        <img src="images/2.jpeg" alt="img2" class="img-op">
        <button class="popup-btn btn">look</button>
    </li>
    <li class="item-list__item">
        <img src="images/3.jpeg" alt="img3" class="img-op">
        <button class="popup-btn btn">look</button>
    </li>
    <li class="item-list__item">
        <img src="images/4.jpeg" alt="img4" class="img-op">
        <button class="popup-btn btn">look</button>
    </li>
</ul>

SCSS

button {
    overflow : hidden;
    outline : none;
}
.text-center {
    text-align: center;
}
.img-pc {
    display:none;
}
.wrapper {
    box-sizing: border-box;
    padding: 0 20px;
}
.btn {
    display: block;
    border-radius: 2px;
    -webkit-appearance:none;
    appearance:none;
    padding:  8px 16px;
    font-size: 1.2rem;
    border:none;
    color: #fff;
    background-color: $main-color;
    font-family: 'Montserrat', sans-serif;
    outline: none;
    cursor: pointer;
}
.item-list {
    //パラメータ
    $marginLeft: 16px;

    //プロパティ
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
    margin-left: (-1 * $marginLeft);
    padding: 0 16px;

    &__item {
        display: block;
        margin-top: 32px;
        margin-left: $marginLeft;
        width: 200px;
    }
}
.img-op {
    width: 240px;
    height: 96px;
    display: block;
    border-radius: 8px;
    object-fit: cover;

    &.active {
        transform: scale(0.5);
    }
}
.img-input {
    display: none;
}

.popup-btn {
    display: block;
    margin: 16px auto;
}

자바스크립트

자바스크립트

//popup-btnクラスの要素を全て取得
let popupBtns = Array.from(document.getElementsByClassName('popup-btn'));
popupBtns.forEach(function(popupBtn) {
//その中からクリックイベントが発生した要素を取得
  popupBtn.addEventListener('click', function() {
    //親要素に遡り、ymg-opクラスの要素を取得。activeクラスをtoggle。
    popupBtn.parentElement.getElementsByClassName('img-op')[0].classList.toggle('active');
  });
});

구현 팁

사고방식으로는 다음과 같다.
jQuery라면 간단하지만, 생js라면 상당히 귀찮은.

이벤트가 발생한 요소 얻기

1.에서 얻은 요소의 부모 요소 얻기

2.의 아이 요소를 취득 (1.의 형제 요소에 해당한다)

3. 요소 조작
라는 주위의 굉장한 절차를 밟는 것에 의해, 드디어 형제 요소를 조작할 수 있다.