[JQuery] 옷 사이즈 선택 버튼

결과 사진

버튼 클릭시

html

    <div class="select_size">
        <h2>Select Size</h2>
        <div class="size_list">
            <div class="size_btn">XS</div>
            <div class="size_btn">S</div>
            <div class="size_btn">M</div>
            <div class="size_btn">L</div>
            <div class="size_btn">XL</div>
            <div class="size_btn">XXL</div>
        </div>
    </div>

 

css

.select_size {
    width: 500px;
}

.size_btn {
    display: inline-block;
    background-color: #b5b3b3;
    width: 50px;
    height: 50px;
    align-content: center;
    text-align: center;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: bold;
    cursor: pointer;
}

.size_btn.active {
    background-color: #c12424;
    color: white;
}

 

javascript

$(document).ready(function () {
    $(".size_btn").on("click", btn => toggleSizeBtn(btn));
})

function toggleSizeBtn(btn) {
    $(".size_btn").removeClass("active");

    $(btn.target).addClass("active");
}

 

버튼을 div로 해서 정렬하기 위해 inline-block으로 바꾸었는데

button태그는 기본 inline-block이라서 이걸 썼어도 괜찮았겠다. 

 

버튼은 inline-block!