채택완료
알림 / 취소 버튼 하나로 묶으는법???
<span id="setSub" class="button button2">구독알림</span>
<span id="cancelSub"class="button button2">구독취소</span>
구독알림 구독취소 버튼 질문 드립니다.
이걸 하나로 만드려면 어떻게 해야될지 감이 안옵니다
혹시 예시 볼 수 있는 소스를 구글에 뭐라고 검색해야지 나오는지
저걸 하나로 합칠 수 있는 방법이 없을까요...??
부탁드립니다.
답변 3개 / 댓글 4개
채택된 답변
+20 포인트
html5 의 data-attribute 속성과
jquery 의 data() 함수를 이용하는 방법이 있습니다.
참고글 - https://cjh5414.github.io/html-jquery-add-custom-attribute/
ex.
Copy
<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>답변에 대한 댓글 4개
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="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>
[code]
<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>
[/code]
<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>
[/code]
답변을 작성하려면 로그인이 필요합니다.
이부분은 어떻게 불러와야 될까요..??