<span id="setSub" class="button button2">구독알림</span>
<span id="cancelSub"class="button button2">구독취소</span>
구독알림 구독취소 버튼 질문 드립니다.
이걸 하나로 만드려면 어떻게 해야될지 감이 안옵니다
혹시 예시 볼 수 있는 소스를 구글에 뭐라고 검색해야지 나오는지
저걸 하나로 합칠 수 있는 방법이 없을까요...??
부탁드립니다.
답변 3개 / 댓글 4개
채택된 답변
+20 포인트
마르스컴퍼니
2020-03-25 (수) 21:55:47
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개
wnsah6288
2020-03-27 (금) 00:12:15
마르스컴퍼니
2020-03-27 (금) 15:12:31
이해를 잘 못했습니다.
구독취소 버튼은 없어지는 거죠.
버튼 하나로, 구독알림과 구독취소가 번갈아 됩니다.
구독취소 버튼은 없어지는 거죠.
버튼 하나로, 구독알림과 구독취소가 번갈아 됩니다.
wnsah6288
2020-03-27 (금) 16:34:32
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>
마르스컴퍼니
2020-03-27 (금) 17:02:12
[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]
2020-03-26 (목) 12:54:01
span 테그를 클릭했을때 span테그의 내용이 '구독알림'이면 '구독취소'로 변경하고 어쩌구 저쩌구 처리하고
반대로 '구독취소'면 span테그 내용을 '구독알림'으로 변경하고 어쩌구 저쩌구 처리
구글검색은
span onclick 이벤트 정도로 검색하면 되실 듯
블랙캣77
2020-03-25 (수) 20:05:53
if문으로 하셔야할거 같네요 구독일 경우와 아닌 경우를 변수에 넣어두시고
if(변수) {
}else{
}
형식으로 하시면 될거 같습니다.
답변을 작성하려면 로그인이 필요합니다.
이부분은 어떻게 불러와야 될까요..??