jQuery class 버튼의 attribute값을 통해 id선택하기

리스트 구현시 반복문을 통해 생성된 a tag 버튼이 있다치자

그 모양은 아래와 같을 것이다.

<a href="#" class="BTNCANCEL styleBtnSmallRed" id="CANCEL_1" IDX="1">취소하기</a>

<a href="#" class="BTNCANCEL styleBtnSmallRed" id="CANCEL_2" IDX="2">취소하기</a>

<a href="#" class="BTNCANCEL styleBtnSmallRed" id="CANCEL_3" IDX="3">취소하기</a>

<a href="#" class="BTNCANCEL styleBtnSmallRed" id="CANCEL_4" IDX="4">취소하기</a>

이 링크 버튼을 눌렀을 때 jQuery를 통해 무언가 작업을 진행시키고 해당 버튼을 선택하여 링크 값을 빼버리는 작업을 진행하고자 한다.

보다시피 각 링크의 아이디는 "CANCEL_" + 순번으로 되어 있고, attribute는 IDX에 고유한 값을 부여하였다.

버튼을 누르면 아래처럼 this를 통해 IDX값을 가져와서 처리시키면 되는건 매우 쉽다.

이후 그냥 a link 버튼의 모양을 지정해준 클래스를 removeClass를 통해 날려주고 이름도 취소하기에서 취소됨으로 바꾸는 내용이다.

$("#CANCEL" + $(this).attr("SS_IDX"))

        $(".BTNCANCEL").click(function(e) {

e.preventDefault();

var objCancel = $("#CANCEL_" + $(this).attr("IDX"));

objCancel.text("취소됨");

objCancel.removeClass("styleBtnSmallRed");

alert("취소되었습니다.");

        });