드롭 메뉴 표시가 뜻대로 안됩니다. 채택완료
</p>
<p> <li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>
<div class="dropdown">
<a onclick="myFunction()" class="dropbtn"></span><?php echo $rank_name; ?></a></p>
<p><?php echo $row['mb_id']?> <!-- 여기서는 아이디가 차례대로 제대로 나옵니다. -->
<div id="myDropdown" class="dropdown-content">
<a href="/g5/bbs/profile.php?mb_id=<?=$row['mb_id']?>">자기소개</a> <!-- 여기서부턴 아이디가 첫번째것만 반복되서 나옵니다. -->
<a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$row['mb_id']?>">쪽지보내기</a>
</div>
</div>
</td></tr></table>
<span class="rank_point"><?php echo $point; ?></span></li></p>
<p>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}</p>
<p>// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script></p>
<p>
포인트 랭킹 목록을 표시하고 이름 클릭하면 드롭메뉴가 나오게 하려고 위 소스를 사용했습니다.
문제는 드롭메뉴는 나오지만 어느 곳에서 건 간에 첫번째 아이디만 나옵니다.
어딜 손봐야할까요...
답변 1개
아이디 부분에서 랭킹 첫번째만 나온다는 말씀이시죠?
제가 생각하는게 맞다면
</b></p>
<p>$rank_name = $row['mb_nick'];</p>
<p><b>
이 부분 밑에
</b>
$rank_id = $row['mb_id']; </p>
<p><b>
이걸 추가 해주시고.
</b></p>
<p> <li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>
<div class="dropdown">
<a onclick="myFunction()" class="dropbtn"></span><?php echo $rank_name; ?></a>
<?php echo $rank_id?> <!-- 여기서는 아이디가 차례대로 제대로 나옵니다. -->
<div id="myDropdown" class="dropdown-content">
<a href="/g5/bbs/profile.php?mb_id=<?=$rank_id?>">자기소개</a> <!-- 여기서부턴 아이디가 첫번째것만 반복되서 나옵니다. -->
<a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$rank_id?>">쪽지보내기</a>
</div>
</div>
</td></tr></table>
<span class="rank_point"><?php echo $point; ?></span></li></p>
<p><script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script></p>
<p><b>
이렇게 수정 해주세요.
</b>
$rank_id = $row['mb_id']; </p>
<p><b>
은 for 문 안에 있어야 합니다. 그래야지 회원을 조회해서 랭킹 순서대로 출력해요
답변에 대한 댓글 5개
<?php
include_once("./_common.php");
//include_once(G5_THEME_MOBILE_PATH.'/head.php');
?>
<style type="text/css">
.pl_rank2{clear:both;position:relative;margin:0 auto;width:370px;padding:0px 0 0px}
.pl_rank2:after {display:block;visibility:hidden;clear:both;content:""}
.pl_rank2 h2{padding:0 0px;height:28px;line-height:2.4em;background:#6a6e87;color:#fff}
.pl_rank2_ul{padding:3px 0 0}
.pl_rank2_ul ul{float:left;width:370px;margin:0;padding:0;overflow:hidden;list-style:none}
.pl_rank2_ul ul li{position:relative;line-height:18px;margin:5px 0}
.pl_rank2_ul ul li .rank_bg{display:inline-block;width:17px;height:17px;margin-right:8px;text-align:center;color:#fff;background:#b3b8c0;text-indent:-1px;border-radius:2px}
.pl_rank2_ul ul li .rank_bg1{color:#fff;background:#da0000}
.pl_rank2_ul ul li .rank_bg2{color:#fff;background:#fdb800}
.pl_rank2_ul ul li .rank_bg3{color:#fff;background:#657bc8}
.pl_rank2_ul ul li .rank_point{position:absolute;top:0;right:0px;font-family:verdana;color:#d83d44;font-size:0.8em;font-weight:bold}
</style>
<div class="pl_rank2">
<b>【 포인트 순위 TOP 10 】</b>
<div class="pl_rank2_ul">
<ul>
<?php
$sql_common = "mb_id != '{$config['cf_admin']}' ";
$rank_rows = 10; //출력 수
$sql = " select * from {$g5['member_table']} where {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$rank = number_format($i + 1);
//$rank_name = get_sideview($row['mb_nick'], $row['mb_nick']);
$rank_name = $row['mb_nick'];
$rank_id=$row['mb_id'];
$point = number_format($row['mb_point']);
if ($rank == 1) {
$rank_bg = ' rank_bg1';
} else if ($rank == 2) {
$rank_bg = ' rank_bg2';
} else if ($rank == 3) {
$rank_bg = ' rank_bg3';
} else {
$rank_bg = '';
}
?>
<style>
/*.dropbtn {
--background-color: #3498DB;
--color: white;
padding: 16px;
font-size: 1em;
border: none;
cursor: pointer;
}
*/
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>
<div class="dropdown">
<a onclick="myFunction()" class="dropbtn"></span><?php echo $rank_name; ?></a>
<div id="myDropdown" class="dropdown-content">
<a href="/g5/bbs/profile.php?mb_id=<?=$rank_id?>">자기소개</a>
<a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$rank_id?>">쪽지보내기</a>
</div>
</div>
</td></tr></table>
<span class="rank_point"><?php echo $point; ?></span></li>
<?php } ?>
</ul>
</div>
</div>
<?php //include_once(G5_THEME_MOBILE_PATH.'/tail.php'); ?>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
[/code]
이렇게 해보세요. 아마 포인트 부분에서 에러난걸껍니다. 만약에 포인트 0포인트 이상부터 하고싶으시면
[code]
<?php
$sql_common = " and mb_id != '{$config['cf_admin']}' ";
$rank_rows = 10; //출력 수
$sql = " select * from {$g5['member_table']} where mb_point > '0' {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$rank = number_format($i + 1);
//$rank_name = get_sideview($row['mb_nick'], $row['mb_nick']);
$rank_name = $row['mb_nick'];
$rank_id=$row['mb_id'];
$point = number_format($row['mb_point']);
if ($rank == 1) {
$rank_bg = ' rank_bg1';
} else if ($rank == 2) {
$rank_bg = ' rank_bg2';
} else if ($rank == 3) {
$rank_bg = ' rank_bg3';
} else {
$rank_bg = '';
}
?>
[/code]
이렇게하시면 0포인트 이상 랭킹 나옵니다.
랭킹은 잘 표현되는데 아이디 클릭>드롭다운 메뉴 에서 드롭다운 메뉴에 소메뉴(자기소개)를 클릭하면 항상 같은 값이 나온다는 얘기입니다.
[code]
<div id="myDropdown" class="dropdown-content">
<a href="/g5/bbs/profile.php?mb_id=<?=$rank_id?>">자기소개</a> <!-- 여기서부턴 아이디가 첫번째것만 반복되서 나옵니다. -->
<a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$rank_id?>">쪽지보내기</a>
</div>
[/code]
이 div 안에서는 저 $rank_id 값이 항상 한가지 같은 값만 나온다는 소리죠..
저 드롭메뉴 창도 위치가 항상 첫번째 아이디에서 고정되있는데 관련이 있는거 같습니다.
<style type="text/css">
.pl_rank2{clear:both;position:relative;margin:0 auto;width:370px;padding:0px 0 0px}
.pl_rank2:after {display:block;visibility:hidden;clear:both;content:""}
.pl_rank2 h2{padding:0 0px;height:28px;line-height:2.4em;background:#6a6e87;color:#fff}
.pl_rank2_ul{padding:3px 0 0}
.pl_rank2_ul ul{float:left;width:370px;margin:0;padding:0;overflow:hidden;list-style:none}
.pl_rank2_ul ul li{position:relative;line-height:18px;margin:5px 0}
.pl_rank2_ul ul li .rank_bg{display:inline-block;width:17px;height:17px;margin-right:8px;text-align:center;color:#fff;background:#b3b8c0;text-indent:-1px;border-radius:2px}
.pl_rank2_ul ul li .rank_bg1{color:#fff;background:#da0000}
.pl_rank2_ul ul li .rank_bg2{color:#fff;background:#fdb800}
.pl_rank2_ul ul li .rank_bg3{color:#fff;background:#657bc8}
.pl_rank2_ul ul li .rank_point{position:absolute;top:0;right:0px;font-family:verdana;color:#d83d44;font-size:0.8em;font-weight:bold}
</style>
<style>
/*.dropbtn {
--background-color: #3498DB;
--color: white;
padding: 16px;
font-size: 1em;
border: none;
cursor: pointer;
}
*/
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<div class="pl_rank2">
<b>【 포인트 순위 TOP 10 】</b>
<div class="pl_rank2_ul">
<ul>
<?php
$sql_common = "mb_id != '{$config['cf_admin']}' ";
$rank_rows = 10; //출력 수
$sql = " select * from {$g5['member_table']} where {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$rank = number_format($i + 1);
//$rank_name = get_sideview($row['mb_nick'], $row['mb_nick']);
$rank_name = $row['mb_nick'];
$rank_id = $row['mb_id'];
$point = number_format($row['mb_point']);
if ($rank == 1) {
$rank_bg = ' rank_bg1';
} else if ($rank == 2) {
$rank_bg = ' rank_bg2';
} else if ($rank == 3) {
$rank_bg = ' rank_bg3';
} else {
$rank_bg = '';
}
?>
<li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>
<div class="dropdown">
<a onclick="myFunction<?php echo $i; ?>()" class="dropbtn"></span><?php echo $rank_name; ?></a>
<div id="myDropdown<?php echo $i; ?>" class="dropdown-content">
<a href="/g5/bbs/profile.php?mb_id=<?php echo $rank_id; ?>">자기소개</a>
<a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?php echo $rank_id; ?>">쪽지보내기</a>
</div>
</div>
</td></tr></table>
<span class="rank_point"><?php echo $point; ?></span></li>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction<?php echo $i; ?>() {
document.getElementById("myDropdown<?php echo $i; ?>").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<?php } ?>
[/code]
아하 네네 이제 이해했습니다. 이대로 해보세요. 저는 그냥 빠르게 만든다고 "myFunction" 부분을 for 문 돌렸는대 자바스크립트로 for 문돌리셔서 만드시면 됩니다.
ps. 이전에 댓글 삭제했습니다. 술한잔 했더니 오버했습니다. 죄송합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
<?php
include_once("./_common.php");
//include_once(G5_THEME_MOBILE_PATH.'/head.php');
?>
<style type="text/css">
.pl_rank2{clear:both;position:relative;margin:0 auto;width:370px;padding:0px 0 0px}
.pl_rank2:after {display:block;visibility:hidden;clear:both;content:""}
.pl_rank2 h2{padding:0 0px;height:28px;line-height:2.4em;background:#6a6e87;color:#fff}
.pl_rank2_ul{padding:3px 0 0}
.pl_rank2_ul ul{float:left;width:370px;margin:0;padding:0;overflow:hidden;list-style:none}
.pl_rank2_ul ul li{position:relative;line-height:18px;margin:5px 0}
.pl_rank2_ul ul li .rank_bg{display:inline-block;width:17px;height:17px;margin-right:8px;text-align:center;color:#fff;background:#b3b8c0;text-indent:-1px;border-radius:2px}
.pl_rank2_ul ul li .rank_bg1{color:#fff;background:#da0000}
.pl_rank2_ul ul li .rank_bg2{color:#fff;background:#fdb800}
.pl_rank2_ul ul li .rank_bg3{color:#fff;background:#657bc8}
.pl_rank2_ul ul li .rank_point{position:absolute;top:0;right:0px;font-family:verdana;color:#d83d44;font-size:0.8em;font-weight:bold}
</style>
<div class="pl_rank2">
<b>【 포인트 순위 TOP 10 】</b>
<div class="pl_rank2_ul">
<ul>
<?php
$sql_common = " and mb_id != '{$config['cf_admin']}' ";
$rank_rows = 10; //출력 수
$sql = " select * from {$g5['member_table']} where mb_point > '{$row['mb_point']}' {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$rank = number_format($i + 1);
//$rank_name = get_sideview($row['mb_nick'], $row['mb_nick']);
$rank_name = $row['mb_nick'];
$rank_id=$row['mb_id'];
$point = number_format($row['mb_point']);
if ($rank == 1) {
$rank_bg = ' rank_bg1';
} else if ($rank == 2) {
$rank_bg = ' rank_bg2';
} else if ($rank == 3) {
$rank_bg = ' rank_bg3';
} else {
$rank_bg = '';
}
?>
<style>
/*.dropbtn {
--background-color: #3498DB;
--color: white;
padding: 16px;
font-size: 1em;
border: none;
cursor: pointer;
}
*/
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<li><table><tr><td><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span>
<div class="dropdown">
<a onclick="myFunction()" class="dropbtn"></span><?php echo $rank_name; ?></a>
<div id="myDropdown" class="dropdown-content">
<a href="/g5/bbs/profile.php?mb_id=<?=$rank_id?>">자기소개</a>
<a href="/g5/bbs/memo_form.php?me_recv_mb_id=<?=$rank_id?>">쪽지보내기</a>
</div>
</div>
</td></tr></table>
<span class="rank_point"><?php echo $point; ?></span></li>
<?php } ?>
</ul>
</div>
</div>
<?php //include_once(G5_THEME_MOBILE_PATH.'/tail.php'); ?>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
[/code]
소스가 너무 길어서 제딴엔 질문과 상관있는 부분만 자른다는게 질문을 어렵게 했나보네요.
풀 소스입니다.
말씀해주신대로 한것과 같은데 마찮가지 현상입니다. ㅜㅜ;