[jquery] 여러폼 에서 하나만 클릭 되는 버튼만들기

폼이 여러개일때 하나씩 클릭되는 버튼 만들기

<form method="get" class="step1">
                        <h3>후원방식</h3>
                        <div class="how">
                            <button type="button" class="how-click">정기후원</button>
                            <button type="button" class="how-click">일시후원</button>
                        </div>
                        <div class="much">
                            <button type="button" class="much-click">10,000</button>
                            <button type="button" class="much-click">30,000</button>
                            <button type="button" class="much-click">100,000</button>
                            <button type="button" class="much-click">150,000</button>
                            <button type="button" class="much-click">200,000</button>
                            <button type="button" class="much-click"><input type="text" Placeholder="직접 입력하기"></button>
                        </div>
                        </form>

✅html
1) 버튼을 div로 감싸 2개 만들어준다

    $('button').click(function () {
        $(this).addClass('click');
    });

✅jquery
1) 클릭시 addClass로 색상이 바뀌게 제작
➡️ 다른 button클릭시 사라지지 않고 다시눌러도 사라지지않는다. addClass가 남아있음

    $(document).on("click", "button", function () {
        button = $('button'); 
        button.toggle(
            function(){button.addClass('click')},
            function(){button.removeClass('click')}
          );
      });

✅jquery
1) 토들 버튼으로 class추가 삭제
➡️ toggle이기 때문에 아예 레이어가 사라짐

    $('button').each(function (index) {
        $(this).attr('button-index', index);
    }).click(function () {
        var index = $(this).attr('button-index');
        $('button[button-index=' + index + ']').addClass('click');
        $('button[button-index!=' + index + ']').removeClass('click');
    });

✅jquery
1) 버튼을 index로 받아서 인덱스 클릭시 하나만 나타나게 제작
➡️ index를 전체에 주어서 밑에 폼으로 내려갔을때 상단에 클릭효과가 적용되지 않음

    $(document).on("click", "div>button", function () {
        $(this).removeClass('click');
        $(this).addClass('click');
    });

✅jquery
1) addClass전에 removeClass를 추가하여 기존 클릭 이벤트를 삭제
➡️ remove가 전체로 되어 위와 같이 내려갔을때 상단 클릭효과가 적용되지않음

$(document).on("click", "div>button", function () {
        $(this).addClass('click').siblings().removeClass('click');
    });

//siblings로 해결 siblings:선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.

✅jquery /최종해결
1) addClass에 sblings이용 하여 해결
➡️ siblings:선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.
따라서 div별로 묶였을때만 적용

✔️ siblings개념 이해