알림 / 취소 버튼 하나로 묶으는법???

알림 / 취소 버튼 하나로 묶으는법???

QA

알림 / 취소 버튼 하나로 묶으는법???

본문

<span id="setSub" class="button button2">구독알림</span>

<span id="cancelSub"class="button button2">구독취소</span>

 

구독알림 구독취소 버튼 질문 드립니다.

 

이걸 하나로 만드려면 어떻게 해야될지 감이 안옵니다

 

혹시 예시 볼 수 있는 소스를 구글에 뭐라고 검색해야지 나오는지

 

저걸 하나로 합칠 수 있는 방법이 없을까요...??

 

부탁드립니다.

이 질문에 댓글 쓰기 :

답변 3

html5 의 data-attribute 속성과

jquery 의 data() 함수를 이용하는 방법이 있습니다.

 

참고글 - https://cjh5414.github.io/html-jquery-add-custom-attribute/

 

ex.


<span id="btnSub" class="button button2" data-status="<?php echo $str_onoff ?>" >구독</span>
 
<script>
$(function() {
    $('#btnSub').on('click', function() {
        var status = $(this).data('status');
        if (status == "on") {
          // 구독 취소
          $(this).data('status', 'off');
        } else if (status == "off") {
          // 구독 알림
          $(this).data('status', 'on');
        }
    });
    
});
</script>

id 부분에 스크립트가 있습니다.

요렇게 라면 어떻게 저소스랑 엮어야 될지...

    <span id="setSub" class="button button2">구독알림</span>
            <span id="cancelSub"class="button button2">구독취소</span>


<script>
$("#setSub").click(function()
{
    if(!g5_is_member) {
            alert("회원이시라면 로그인 후 이용해 보십시오.");
            return false;
        }
else $.post("../setSub.php", { title: "<?=$bo_table;?>" }, function(result){
//   console.log(result);   
//   alert(result);
alert("구독되었습니다.");
 
});
});

$("#cancelSub").click(function()
{
    if(!g5_is_member) {
            alert("회원이시라면 로그인 후 이용해 보십시오.");
            return false;
        }
else $.post("../cancelSub.php", { title: "<?=$bo_table;?>" }, function(result){
  console.log(result);   
//   alert(result);
alert("구독취소되었습니다.");
 
});



});
</script>


<span id="btnSub" class="button button2" data-status="off">구독알림</span>

<script>
$(function() {
	$('#btnSub').on('click', function() {
		if(!g5_is_member) {
			alert("회원이시라면 로그인 후 이용해 보십시오.");
			return false;
		}
		
		var status = $(this).data('status');
		
		if (status == "on") { // 현재 구독중 상태인 경우
		  $.post("../cancelSub.php", { title: "<?=$bo_table;?>" }, function(result){
				console.log(result);   				
				alert("구독 취소되었습니다.");
			});
		  
		  $(this).data('status', 'off');
		  $(this).text('구독알림');
		} else if (status == "off") { // 현재 구독중 상태가 아닌 경우
		  $.post("../setSub.php", { title: "<?=$bo_table;?>" }, function(result){			
				alert("구독되었습니다.");
			});
			
		  $(this).data('status', 'on');
		  $(this).text('구독취소');
		}
	});    
});
</script>

span 테그를 클릭했을때 span테그의 내용이 '구독알림'이면 '구독취소'로 변경하고 어쩌구 저쩌구 처리하고

반대로 '구독취소'면 span테그 내용을 '구독알림'으로 변경하고 어쩌구 저쩌구 처리

 

구글검색은 

span onclick 이벤트   정도로 검색하면 되실 듯

답변을 작성하시기 전에 로그인 해주세요.
전체 13
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT