댓글 등록 버튼으로 생성한 댓글들에 버튼 기능이 제대로 작동하지 않습니다ㅜ
본문
오늘은 비가 생각보다 오랫동안 오네요... 좀만하고 자려했는데
문제가 생겨 5시간동안 붙잡고 있는데 도저히 감이 안잡혀서 고수님들께 팁을 얻고자 질문남깁니다
먼제 제가 댓글 등록 버튼 하나를 놓고
그 버튼을 클릭하면 로그인한 계정의 업체명과 클릭하면 정보를 볼수 있는 버튼이 등록됩니다
그러한 댓글들을 여러계정으로 생성하면 view_comment에서는 업체명이 보이는데
문제는 각각 생성된 버튼들을 클릭했을때 자바스크립트로 팝업 호출되게끔 해놓았는데
맨처음 생성한 업체의 정보만 나옵니다...
두번째,세번째,네번째....등 버튼을 눌러도 처음 등록한 업체 정보만 나오는데 버튼을 for문 돌려봐도 안되고..
코드한번만 살펴봐주시고 팁 좀 부탁드리겠습니다 고수님들
댓글 남겨주실 모든 분들께 미리 감사합니다
--------------------------------
view_comment.skin.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
// 글자수 제한
var char_min = parseInt(<?php echo $comment_min ?>); // 최소
var char_max = parseInt(<?php echo $comment_max ?>); // 최대
</script>
<!-- 댓글 시작 { -->
<div class="contact-subject">상담가능 업체정보</div>
<section id="bo_vc">
<h2>댓글목록</h2>
<?php
$cmt_amt = count($list);
for ($i=0; $i<$cmt_amt; $i++) {
$comment_id = $list[$i]['wr_id'];
$cmt_depth = strlen($list[$i]['wr_comment_reply']) * 50;
$comment = $list[$i]['content'];
$mb = get_member($list[$i]['mb_id']);
/*
if (strstr($list[$i]['wr_option'], "secret")) {
$str = $str;
}
*/
$comment = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp|mms)\:\/\/([^[:space:]]+)\.(mp3|wma|wmv|asf|asx|mpg|mpeg)\".*\<\/a\>\]/i", "<script>doc_write(obj_movie('$1://$2.$3'));</script>", $comment);
$cmt_sv = $cmt_amt - $i + 1; // 댓글 헤더 z-index 재설정 ie8 이하 사이드뷰 겹침 문제 해결
$c_reply_href = $comment_common_url.'&c_id='.$comment_id.'&w=c#bo_vc_w';
$c_edit_href = $comment_common_url.'&c_id='.$comment_id.'&w=cu#bo_vc_w';
$is_comment_reply_edit = ($list[$i]['is_reply'] || $list[$i]['is_edit'] || $list[$i]['is_del']) ? 1 : 0;
?>
<article id="c_<?php echo $comment_id ?>" <?php if ($cmt_depth) { ?>style="margin-left:<?php echo $cmt_depth ?>px;border-top-color:#e0e0e0"<?php } ?>>
<div class="cm_wrap">
<header style="z-index:<?php echo $cmt_sv; ?>">
<p class="box_sub">조명 업체 등록 현황</p>
<h2><?php echo get_text($list[$i]['wr_name']); ?>님의 <?php if ($cmt_depth) { ?><span class="sound_only">댓글의</span><?php } ?> 댓글</h2>
<?php echo $list[$i]['name'] ?>
<button class="brand_info" >업체정보</button>
<div id="open_company" >
<div class="popup_wrap" style="display:none;">
<h3>업체 상세보기<i id="close1" class="fa-solid fa-xmark"></i></h3>
<div>
<span>업체명</span>
<p><?php echo $mb['mb_nick']?></p>
</div>
<div>
<span>연락처</span>
<p><?php echo $mb['mb_hp']?></p>
</div>
</div>
</div>
<div class="backg2" style="display:none;"></div>
<span class="sound_only">작성일</span>
<span class="bo_vc_hdinfo"><i class="fa fa-clock-o" aria-hidden="true"></i> <time datetime="<?php echo date('Y-m-d\TH:i:s+09:00', strtotime($list[$i]['datetime'])) ?>"><?php echo $list[$i]['datetime'] ?></time></span>
<?php
include(G5_SNS_PATH.'/view_comment_list.sns.skin.php');
?>
</header>
<!-- 댓글 출력 -->
<div class="cmt_contents">
<?php if($is_comment_reply_edit) {
if($w == 'cu') {
$sql = " select wr_id, wr_content, mb_id from $write_table where wr_id = '$c_id' and wr_is_comment = '1' ";
$cmt = sql_fetch($sql);
if (isset($cmt)) {
if (!($is_admin || ($member['mb_id'] == $cmt['mb_id'] && $cmt['mb_id']))) {
$cmt['wr_content'] = '';
}
$c_wr_content = $cmt['wr_content'];
}
}
?>
<?php } ?>
</div>
<span id="edit_<?php echo $comment_id ?>" class="bo_vc_w"></span><!-- 수정 -->
<span id="reply_<?php echo $comment_id ?>" class="bo_vc_w"></span><!-- 답변 -->
<input type="hidden" value="<?php echo strstr($list[$i]['wr_option'],"secret") ?>" id="secret_comment_<?php echo $comment_id ?>">
<textarea id="save_comment_<?php echo $comment_id ?>" style="display:none"><?php echo get_text($list[$i]['content1'], 0) ?></textarea>
</div>
<?php if($is_comment_reply_edit) { ?>
<div class="bo_vl_opt">
<button type="button" class="btn_cm_opt btn_b01 btn"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sound_only">댓글 옵션</span></button>
<ul class="bo_vc_act">
<?php if ($list[$i]['is_reply']) { ?><li><a href="<?php echo $c_reply_href; ?>" onclick="comment_box('<?php echo $comment_id ?>', 'c'); return false;">답변</a></li><?php } ?>
<?php if ($list[$i]['is_edit']) { ?><li><a href="<?php echo $c_edit_href; ?>" onclick="comment_box('<?php echo $comment_id ?>', 'cu'); return false;">수정</a></li><?php } ?>
<?php if ($list[$i]['is_del']) { ?><li><a href="<?php echo $list[$i]['del_link']; ?>" onclick="return comment_delete();">삭제</a></li><?php } ?>
</ul>
</div>
<?php } ?>
<script>
$(function() {
// 댓글 옵션창 열기
$(".btn_cm_opt").on("click", function(){
$(this).parent("div").children(".bo_vc_act").show();
});
// 댓글 옵션창 닫기
$(document).mouseup(function (e){
var container = $(".bo_vc_act");
if( container.has(e.target).length === 0)
container.hide();
});
});
</script>
</article>
<?php } ?>
<?php if ($i == 0) { //댓글이 없다면 ?><p id="bo_vc_empty"></p><?php } ?>
</section>
<!-- } 댓글 끝 -->
<?php if ($is_comment_write) {
if($w == '')
$w = 'c';
?>
<!-- 댓글 쓰기 시작 { -->
<aside id="bo_vc_w" class="bo_vc_w">
<h2>댓글쓰기</h2>
<form name="fviewcomment" id="fviewcomment" action="<?php echo $comment_action_url; ?>" onsubmit="return fviewcomment_submit(this);" method="post" autocomplete="off">
<input type="hidden" name="w" value="<?php echo $w ?>" id="w">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="wr_id" value="<?php echo $wr_id ?>">
<input type="hidden" name="comment_id" value="<?php echo $c_id ?>" id="comment_id">
<input type="hidden" name="sca" value="<?php echo $sca ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl ?>">
<input type="hidden" name="stx" value="<?php echo $stx ?>">
<input type="hidden" name="spt" value="<?php echo $spt ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<input type="hidden" name="is_good" value="">
<span class="sound_only">내용</span>
<?php if ($comment_min || $comment_max) { ?><strong id="char_cnt"><span id="char_count"></span>글자</strong><?php } ?>
<textarea id="wr_content" name="wr_content" maxlength="10000" class="required" title="내용" placeholder="댓글내용을 입력해주세요"
<?php if ($comment_min || $comment_max) { ?>onkeyup="check_byte('wr_content', 'char_count');"<?php } ?>><?php echo $c_wr_content; ?></textarea>
<?php if ($comment_min || $comment_max) { ?><script> check_byte('wr_content', 'char_count'); </script><?php } ?>
<script>
$(document).on("keyup change", "textarea#wr_content[maxlength]", function() {
var str = $(this).val()
var mx = parseInt($(this).attr("maxlength"))
if (str.length > mx) {
$(this).val(str.substr(0, mx));
return false;
}
});
</script>
<?php if($cmt_amt < 10) { ?>
<div class="bo_vc_w_wr">
<div class="bo_vc_w_info">
<?php if ($is_guest) { ?>
<label for="wr_name" class="sound_only">이름<strong> 필수</strong></label>
<input type="text" name="wr_name" value="<?php echo get_cookie("ck_sns_name"); ?>" id="wr_name" required class="frm_input required" size="25" placeholder="이름">
<label for="wr_password" class="sound_only">비밀번호<strong> 필수</strong></label>
<input type="password" name="wr_password" id="wr_password" required class="frm_input required" size="25" placeholder="비밀번호">
<?php
}
?>
<?php
if($board['bo_use_sns'] && ($config['cf_facebook_appid'] || $config['cf_twitter_key'])) {
?>
<span class="sound_only">SNS 동시등록</span>
<span id="bo_vc_send_sns"></span>
<?php } ?>
<?php if ($is_guest) { ?>
<?php echo $captcha_html; ?>
<?php } ?>
</div>
<div class="btn_confirm">
<span class="secret_cm chk_box">
<input type="checkbox" name="wr_secret" value="secret" id="wr_secret" class="selec_chk">
<label for="wr_secret"><span></span>비밀글</label>
</span>
<button type="submit" id="btn_submit" class="btn_submit" onclick="return confirm('업체를 등록하시겠습니까?')">업체 등록</button>
</div>
</div>
</form>
</aside>
<script>
var save_before = '';
var save_html = document.getElementById('bo_vc_w').innerHTML;
function good_and_write()
{
var f = document.fviewcomment;
if (fviewcomment_submit(f)) {
f.is_good.value = 1;
f.submit();
} else {
f.is_good.value = 0;
}
}
function fviewcomment_submit(f)
{
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
f.is_good.value = 0;
var subject = "";
var content = "";
$.ajax({
url: g5_bbs_url+"/ajax.filter.php",
type: "POST",
data: {
"subject": "",
"content": f.wr_content.value
},
dataType: "json",
async: false,
cache: false,
success: function(data, textStatus) {
subject = data.subject;
content = data.content;
}
});
<?php if($is_guest) echo chk_captcha_js(); ?>
set_comment_token(f);
document.getElementById("btn_submit").disabled = "disabled";
return true;
}
function comment_box(comment_id, work)
{
var el_id,
form_el = 'fviewcomment',
respond = document.getElementById(form_el);
// 댓글 아이디가 넘어오면 답변, 수정
if (comment_id)
{
if (work == 'c')
el_id = 'reply_' + comment_id;
else
el_id = 'edit_' + comment_id;
}
else
el_id = 'bo_vc_w';
if (save_before != el_id)
{
if (save_before)
{
document.getElementById(save_before).style.display = 'none';
}
document.getElementById(el_id).style.display = '';
document.getElementById(el_id).appendChild(respond);
//입력값 초기화
document.getElementById('wr_content').value = '';
// 댓글 수정
if (work == 'cu')
{
document.getElementById('wr_content').value = document.getElementById('save_comment_' + comment_id).value;
if (typeof char_count != 'undefined')
check_byte('wr_content', 'char_count');
if (document.getElementById('secret_comment_'+comment_id).value)
document.getElementById('wr_secret').checked = true;
else
document.getElementById('wr_secret').checked = false;
}
document.getElementById('comment_id').value = comment_id;
document.getElementById('w').value = work;
if(save_before)
$("#captcha_reload").trigger("click");
save_before = el_id;
}
}
function comment_delete()
{
return confirm("이 댓글을 삭제하시겠습니까?");
}
comment_box('', 'c'); // 댓글 입력폼이 보이도록 처리하기위해서 추가 (root님)
<?php if($board['bo_use_sns'] && ($config['cf_facebook_appid'] || $config['cf_twitter_key'])) { ?>
$(function() {
// sns 등록
$("#bo_vc_send_sns").load(
"<?php echo G5_SNS_URL; ?>/view_comment_write.sns.skin.php?bo_table=<?php echo $bo_table; ?>",
function() {
save_html = document.getElementById('bo_vc_w').innerHTML;
}
);
});
<?php } ?>
</script>
<?php } ?>
<?php } ?>
<!-- } 댓글 쓰기 끝 -->
<script>
jQuery(function($) {
//댓글열기
$(".cmt_btn").click(function(e){
e.preventDefault();
$(this).toggleClass("cmt_btn_op");
$("#bo_vc").toggle();
});
});
</script>
<script>
const brandBtn = document.querySelectorAll(".brand_info");
const popup = document.querySelector(".popup_wrap");
const closePopup = document.getElementById("close1");
const blackBackColor2 = document.querySelector(".backg2");
for(let i=0; i<brandBtn.length; i++) {
brandBtn[i].addEventListener('click', ()=>{
if(popup.style.display === "none"){
popup.style.display = "block";
blackBackColor2.style.display ="block";
} else {
popup.style.display = "none";
}
});
}
function offPopup(){
popup.style.display = "none";
blackBackColor2.style.display ="none";
}
closePopup.addEventListener("click", offPopup);
function offPopupBack(){
popup.style.display = "none";
blackBackColor2.style.display ="none";
}
blackBackColor2.addEventListener("click", offPopupBack);
</script>
답변 3
php 에서 루프로 복수개의 엘리먼트를 생성하는데
버튼을 제외한 나머지 제어는 단수 형태로 해서 발생하는 문제 같습니다.
간략하게 동작 부분만 재구성한 소스입니다.
<style>
.popup_wrap {
display: none;
position: absolute;
top: 20%;
left: 20%;
width: 10em;
height: 10em;
}
.backg2 {
background-color: #000;
width: 100%;
height: 100%;
color: #fff;
}
.close1 {
position: absolute;
top: 0;
right: 0.5em;
color: #fff;
cursor: pointer;
}
</style>
<button class="brand_info">a</button>
<div class="popup_wrap" style="left: 20%; top: 20%;">
<div class="backg2">aa</div>
<span class="close1">x (a)</span>
</div>
<button class="brand_info">b</button>
<div class="popup_wrap" style="left: 30%; top: 30%;">
<div class="backg2">bb</div>
<span class="close1">x (b)</span>
</div>
<button class="brand_info">c</button>
<div class="popup_wrap" style="left: 40%; top: 40%;">
<div class="backg2">cc</div>
<span class="close1">x (c)</span>
</div>
<button class="brand_info">d</button>
<div class="popup_wrap" style="left: 50%; top: 50%;">
<div class="backg2">dd</div>
<span class="close1">x (d)</span>
</div>
<script>
const brandBtn = document.querySelectorAll(".brand_info");
const popup = document.querySelectorAll(".popup_wrap");
const closePopup = document.querySelectorAll(".close1");
const blackBackColor2 = document.querySelectorAll(".backg2");
function toggle_popup(i) {
if(popup[i].style.display != "block"){
popup[i].style.display = "block";
blackBackColor2[i].style.display ="block";
} else {
popup[i].style.display = "none";
}
}
function close_popup_back(i) {
popup[i].style.display = "none";
blackBackColor2[i].style.display ="none";
}
if (brandBtn.length == popup.length && popup.length == closePopup.length && closePopup.length == blackBackColor2.length) {
for(let i=0; i<brandBtn.length; i++) {
brandBtn[i].addEventListener('click', ()=>{
toggle_popup(i);
});
closePopup[i].addEventListener('click', ()=>{
close_popup_back(i);
});
blackBackColor2[i].addEventListener('click', ()=>{
close_popup_back(i);
});
}
}
// closePopup.addEventListener("click", offPopup);
// blackBackColor2.addEventListener("click", offPopupBack);
</script>
배르만님 덕분에 각 버튼이 정상 작동합니다
다시 한번 감사합니다~
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<button type="button" class="btn_cm_opt"><span class="sound_only">댓글 옵션1</span></button>
<div id="company0" style="display:none;">111111111111<button type="button" class="close">닫기</button></div>
<button type="button" class="btn_cm_opt"><span class="sound_only">댓글 옵션2</span></button>
<div id="company1" style="display:none;">222222222222<button type="button" class="close">닫기</button></div>
<button type="button" class="btn_cm_opt"><span class="sound_only">댓글 옵션3</span></button>
<div id="company2" style="display:none;">333333333333<button type="button" class="close">닫기</button></div>
<button type="button" class="btn_cm_opt"><span class="sound_only">댓글 옵션4</span></button>
<div id="company3" style="display:none;">444444444444<button type="button" class="close">닫기</button></div>
<button type="button" class="btn_cm_opt"><span class="sound_only">댓글 옵션5</span></button>
<div id="company4" style="display:none;">5555555555<button type="button" class="close">닫기</button></div>
<script>
$(document).ready(function(){
$('.btn_cm_opt').each(function(i){
$(this).click(function(e){
$('#company'+i).css('display', 'block');
});
});
$('.close').each(function(i){
$(this).click(function(e){
$('#company'+i).css('display', 'none');
});
});
});
</script>
개노미님! 매번 팁 주셔서 감사합니다!
sinbi님 친절한 댓글 감사합니다~