추천 버튼 클릭 이벤트 재질문 드립니다.
관련링크
본문
기존의 추천 버튼에 디자인 관련 css와 스크립트를 이용한 버튼을 적용하려 하는데
회원 로그인후 추천 클릭시 "undefined할 게시물을 하나 이상 선택하세요." 라고 얼럿창이 뜨면서 작동을 안하네요. 추천 버튼 적용안하고 "일반버튼" 으로 하면 "undefined할 게시물을 하나 이상 선택하세요." 얼럿창 뜨고난 다음에 버튼 애니메이션 활성화가 됩니다. 얼럿창 딜레이시간에 맞춰서 스크립활성시간을 4초 줬거든요.. 1초면 얼럿창 뜨면서 정지되네요.
코드 에러인지 아니면 얼럿창때문뜨고나면 반응이 없어지면서 모두 안되는듯합니다.
이거 추천버튼에 아래의 css버튼으로 대채할 수 있는 방법이 있을까요?
바로 아래는 추천 버튼한개에 적용한 부분입니다.
<div class="sbtn-contain">
<div class="sbtn-particles">
<button class="sbtn" a href="apms_good('<?php echo $bo_table;?>', '<?php echo $view['wr_id'];?>', 'good', 'wr_good'); return false;" style="color:#FFF !important; font-size:18px; font-weight:bold;">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</button><?php echo number_format($view['wr_good']) ?>
</div>
</div>
------------------------------------------------ 아래는 css와 스크립입니다. -----------------------------
<style>
.shape {
position: absolute;
width: 50px;
height: 50px;
transform: scale(0.8);
}
.cir {
position: absolute;
border-radius: 50%;
z-index: 5;
}
.sbtn-contain {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sbtn {
position: absolute;
top: 50%;
left: 50%;
padding: 10PX;
transform: translate(-50%, -50%);
border-radius: 4px;
background: #febf00;
text-align: center;
z-index: 10;
transition: 0.2s;
cursor: pointer;
color: #000;
box-shadow: 0px 1px 5px 2px #bfceef;
}
.sbtn:active,
.sbtn:hover,
.sbtn:focus {
outline: none !important;
color: #000;
}
.sbtn-particles {
width: 100px;
height: 100px;
position: absolute;
border-radius: 50%;
color: #eee;
font-family: monospace;
z-index: 5;
/* filter: url(#gooeyness); */
}
.sbtn:active {
transform: scale(0.9) translate(-55%, -55%);
}
</style>
<script>
$.fn.boom = function (e) {
var colors = [
"#ffb3f6",
"#7aa0ff",
"#FFD100"
// '#FFD100',
// '#FF9300',
// '#FF7FA4'
];
var shapes = [
'<polygon class="star" points="21,0,28.053423027509677,11.29179606750063,40.97218684219823,14.510643118126104,32.412678195541844,24.70820393249937,33.34349029814194,37.989356881873896,21,33,8.656509701858067,37.989356881873896,9.587321804458158,24.70820393249937,1.0278131578017735,14.510643118126108,13.94657697249032,11.291796067500632"></polygon>',
// '<path class="circle" d="m 20 1 a 1 1 0 0 0 0 25 a 1 1 0 0 0 0 -25"></path>',
'<polygon class="other-star" points="18,0,22.242640687119284,13.757359312880714,36,18,22.242640687119284,22.242640687119284,18.000000000000004,36,13.757359312880716,22.242640687119284,0,18.000000000000004,13.757359312880714,13.757359312880716"></polygon>',
'<polygon class="diamond" points="18,0,27.192388155425117,8.80761184457488,36,18,27.19238815542512,27.192388155425117,18.000000000000004,36,8.807611844574883,27.19238815542512,0,18.000000000000004,8.80761184457488,8.807611844574884"></polygon>'
];
var sbtn = $(this);
var group = [];
var num = Math.floor(Math.random() * 50) + 30;
for (i = 0; i < num; i++) {
var randBG = Math.floor(Math.random() * colors.length);
var getShape = Math.floor(Math.random() * shapes.length);
var c = Math.floor(Math.random() * 10) + 5;
var scale = Math.floor(Math.random() * (8 - 4 + 1)) + 4;
var x = Math.floor(Math.random() * (150 + 100)) - 100;
var y = Math.floor(Math.random() * (150 + 100)) - 100;
var sec = Math.floor(Math.random() * 1700) + 1000;
var cir = $('<div class="cir"></div>');
var shape = $('<svg class="shape">' + shapes[getShape] + "</svg>");
shape.css({
top: e.pageY - sbtn.offset().top + 20,
left: e.pageX - sbtn.offset().left + 40,
transform: "scale(0." + scale + ")",
transition: sec + "ms",
fill: colors[randBG]
});
sbtn.siblings(".sbtn-particles").append(shape);
group.push({ shape: shape, x: x, y: y });
}
for (var a = 0; a < group.length; a++) {
var shape = group[a].shape;
var x = group[a].x,
y = group[a].y;
shape.css({
left: x + 50,
top: y + 15,
transform: "scale(0)"
});
}
setTimeout(function () {
for (var b = 0; b < group.length; b++) {
var shape = group[b].shape;
shape.remove();
}
group = [];
}, 4000);
};
$(function () {
$(document).on("click", ".sbtn", function (e) {
$(this).boom(e);
});
});
</script>
답변 2
우선 codepen 쪽과 다른 부분이 particles 가 button 엘리먼트를 자식으로 품고 있는 부분 같습니다.
<!-- <div class="sbtn-particles"> -->
<button>...</button>
<div class="sbtn-particles">
</div>
alert 창관련 딜레이 시간은 활성시간이 아니라
particles 하위에 동적으로 생성된 엘리먼트가 다시 삭제되는 지연시간 입니다.
그 딜레이 시간을 늘릴 경우
버튼 연타시 임시 노드들이 DOM 에 상주하는 시간이 길어지면서 메모리 점유율만 높아질수 있습니다.
다음은 별 다른 문제가 확인되지 않는 예제 코드이며
전체적인 의도 여부가 일치할지는 모르겠습니다.
<!-- ------------------------------------------------ 아래는 css와 스크립입니다. ----------------------------- -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.shape {
position: absolute;
width: 50px;
height: 50px;
transform: scale(0.8);
}
.cir {
position: absolute;
border-radius: 50%;
z-index: 5;
}
.sbtn-contain {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sbtn {
position: absolute;
top: 50%;
left: 50%;
padding: 10PX;
transform: translate(-50%, -50%);
border-radius: 4px;
background: #febf00;
text-align: center;
z-index: 10;
transition: 0.2s;
cursor: pointer;
color: #000;
box-shadow: 0px 1px 5px 2px #bfceef;
}
.sbtn:active,
.sbtn:hover,
.sbtn:focus {
outline: none !important;
color: #000;
}
.sbtn-particles {
width: 100px;
height: 100px;
position: absolute;
border-radius: 50%;
color: #eee;
font-family: monospace;
z-index: 5;
/* filter: url(#gooeyness); */
}
.sbtn:active {
transform: scale(0.9) translate(-55%, -55%);
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.boom = function (e) {
var colors = [
"#ffb3f6",
"#7aa0ff",
"#FFD100"
// '#FFD100',
// '#FF9300',
// '#FF7FA4'
];
var shapes = [
'<polygon class="star" points="21,0,28.053423027509677,11.29179606750063,40.97218684219823,14.510643118126104,32.412678195541844,24.70820393249937,33.34349029814194,37.989356881873896,21,33,8.656509701858067,37.989356881873896,9.587321804458158,24.70820393249937,1.0278131578017735,14.510643118126108,13.94657697249032,11.291796067500632"></polygon>',
// '<path class="circle" d="m 20 1 a 1 1 0 0 0 0 25 a 1 1 0 0 0 0 -25"></path>',
'<polygon class="other-star" points="18,0,22.242640687119284,13.757359312880714,36,18,22.242640687119284,22.242640687119284,18.000000000000004,36,13.757359312880716,22.242640687119284,0,18.000000000000004,13.757359312880714,13.757359312880716"></polygon>',
'<polygon class="diamond" points="18,0,27.192388155425117,8.80761184457488,36,18,27.19238815542512,27.192388155425117,18.000000000000004,36,8.807611844574883,27.19238815542512,0,18.000000000000004,8.80761184457488,8.807611844574884"></polygon>'
];
var sbtn = $(this);
var group = [];
var num = Math.floor(Math.random() * 50) + 30;
for (i = 0; i < num; i++) {
var randBG = Math.floor(Math.random() * colors.length);
var getShape = Math.floor(Math.random() * shapes.length);
var c = Math.floor(Math.random() * 10) + 5;
var scale = Math.floor(Math.random() * (8 - 4 + 1)) + 4;
var x = Math.floor(Math.random() * (150 + 100)) - 100;
var y = Math.floor(Math.random() * (150 + 100)) - 100;
var sec = Math.floor(Math.random() * 1700) + 1000;
var cir = $('<div class="cir"></div>');
var shape = $('<svg class="shape">' + shapes[getShape] + "</svg>");
shape.css({
top: e.pageY - sbtn.offset().top + 20,
left: e.pageX - sbtn.offset().left + 40,
transform: "scale(0." + scale + ")",
transition: sec + "ms",
fill: colors[randBG]
});
sbtn.siblings(".sbtn-particles").append(shape);
group.push({ shape: shape, x: x, y: y });
}
for (var a = 0; a < group.length; a++) {
var shape = group[a].shape;
var x = group[a].x,
y = group[a].y;
shape.css({
left: x + 50,
top: y + 15,
transform: "scale(0)"
});
}
setTimeout(function () {
for (var b = 0; b < group.length; b++) {
var shape = group[b].shape;
shape.remove();
}
group = [];
}, 2000);
};
$(function () {
$(document).on("click", ".sbtn", function (e) {
$(this).boom(e);
});
});
</script>
<script>
function apms_good(a, b, c, d) {
var rnd = Math.floor(Math.random() * 2);
if (rnd == 0) {
alert('이미추천했습니다.');
} else {
alert('정상적으로 추천했습니다.');
}
}
function chk_form(frm) {
alert('submit');
return true;
}
</script>
<form method="post" onsubmit="return chk_form(this)">
<button type="submit">submit-a</button>
<button type="submit">submit-b</button>
<button type="submit">submit-c</button>
<div class="sbtn-contain">
<!-- <div class="sbtn-particles"> -->
<button class="sbtn" type="button" onclick="apms_good('tbl', '1', 'good', 'wr_good'); return false;" style="color:#FFF !important; font-size:18px; font-weight:bold;">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</button><?php echo number_format($view['wr_good']) ?>
<div class="sbtn-particles">
</div>
</div>
</form>
네. 감사합니다. ^^ 채택드렸습니다. 아직은 해보지는않았지만 적용해 보겠습니다.
type="button" 요게 일단 있어야되는걸 모르고 하다보니 작동이 잘 안되었구요. .얼럿창뜨느것을 조금 느리게 띄울생각이었거든요. 내일 다시 해봐야 겠습니다.
css때문이 아니라
<button class="sbtn" a href="apms_good(' <-- 이런 코드는 처음 봅니다
<button type="button" class="sbtn" onclick="apms_good(' <==이렇게 해보세요
네. 답변 감사합니다. a href="apms_good(' <-- 이런 코드는 중간에 하도 안되서 테스트로 걸어보던 코드입니다. ㅎㅎ 제가 원본을 올렸어야 되는데 실수했네요.
다시 onclick로 적용 했습니다. "정상적으로 추천했습니다." "이미추천했습니다. "
이렇게 얼럿 메세지는 정상적으로 나오긴한데요.
css 버튼의 class="sbtn" 부분 버튼은 작동이 안됩니다. 그냥 추천버튼만 되네요.
