폼이 여러개일때 하나씩 클릭되는 버튼 만들기
<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개념 이해
