제이쿼리 질문 있습니다~ 채택완료
제이쿼리 위의 사진처럼 아래 파랑색 박스 영역에 마우스를 올리면 해당 마우스 영역안의 탭메뉴 notice/ news/ freeboard 각각의 영역이 변해야 하는데 아래사진처럼 파랑색 박스 위에 마우스를 올리면 어느 영역
이든 freeboard 탭만 선택이 됩니다.
소스는 아래와 같습니다. html <?php </li> $boo_connt=0; $groupCount = count($group); foreach($group as $key => $value) { $boo_connt++; $lt_name="latest_con_".$boo_connt;... ?> <li style="width: <?php echo (352 / $groupCount) - $border?>px;" class="<?=$lt_name?>"> <strong class="lt_title" data-no="<?php echo $key?>"> <?php echo $value['bo_subject']; ?> </strong> </li>....<!-- 파랑색 영역부분입니다. php 부분이니 생략했습니다. --><ul class="group latestGroup<?php echo $key?> <?php echo $groupActive?>"> <p class="leftFloat"> <li class="overflow"> <p class="leftFloat"> </li> 제이쿼리부분 <script type="text/javascript"> $(".overflow").bind("mouseenter focusin", function(e) { $(".<?=$lt_name?>").css("background","gray"); }); $(".overflow").bind("mouseleave focusout", function() { $(".<?=$lt_name?>").css("background","white"); });어떻해 해야 하나요 ~~?? 좀 알려주세요~~
답변 4개
왜 이렇게 만드셨을까나...싶네요.
아래쪽 파란박스는 1개고, 위에 변해야 할 탭은 3개인데,
3개중에 어떤 걸 색을 바꿔야되죠? 그 기준이 뭔지 모르겠네요.
탭이라고 하면 위를 선택해서 아래를 바꾸는게 아닌지;;;
의도는 모르겠으나 원인만 추정해보자면.
위의 foreach 문에서 $lt_name 을 생성하는데, 당연히 반복문의 마지막께
최종적으로 $lt_name에 저장되겠죠.
jquery에서 그대로 $lt_name 이라고 썼으니 맨 끝 탭만 색깔이 바뀌는 거라 보여지네요.
답변에 대한 댓글 2개
<?php
foreach($group as $key => $value)
{
$groupActive ='';
if($key == 0) {
$groupActive = 'groupActive';
}
?>
<ul class="group latestGroup<?php echo $key?> <?php echo $groupActive?>">
<?php for ($i=0; $i<count($value['list']); $i++) { ?>
<li class="overflow">
<p class="leftFloat">
<?php
//echo $value['list'][$i]['icon_reply']." ";
echo "<a href=\"".$value['list'][$i]['href']."\">";
if ($value['list'][$i]['is_notice'])
echo "<strong>".$value['list'][$i]['subject']."</strong>";
else
echo $value['list'][$i]['subject'];
$value1="";
$value1=$value['list'][$i]['comment_cnt'];
if (isset($value1)>0)
{
$value1=trim($value1);
$value1=str_replace(" ","",$value1);
}
if ($value['list'][$i]['comment_cnt'])
{
echo "<font color=#ff3061> (".$value1.")</font>";
}
echo "</a>";
// if ($value['list'][$i]['link']['count']) { echo "[{$value['list'][$i]['link']['count']}]"; }
// if ($value['list'][$i]['file']['count']) { echo "<{$value['list'][$i]['file']['count']}>"; }
if (isset($value['list'][$i]['icon_new'])) echo " " . $value['list'][$i]['icon_new'];
if (isset($value['list'][$i]['icon_hot'])) echo " " . $value['list'][$i]['icon_hot'];
if (isset($value['list'][$i]['icon_file'])) echo " " . $value['list'][$i]['icon_file'];
if (isset($value['list'][$i]['icon_link'])) echo " " . $value['list'][$i]['icon_link'];
if (isset($value['list'][$i]['icon_secret'])) echo " " . $value['list'][$i]['icon_secret'];
?>
</p>
<p class="rightFloat">
<?php echo date('m-d', strtotime($value['list'][$i]['datetime'])); ?>
</p>
</li>
<?php } ?>
<?php if (count($value['list']) == 0) { //게시물이 없을 때 ?>
<li>게시물이 없습니다.</li>
<?php } ?>
</ul>
이렇게 되어있습니다.
댓글을 작성하려면 로그인이 필요합니다.
jquery를 위처럼 두개만 쓰셔야되요.
원리를 설명드리자면
색깔이 바껴야하는 애들은 lastest_con_0, lastest_con_1, lastest_con_2
(이건 잘 됐구요)
마우스 오버했을 때가 문제인데
.overflow에 이벤트를 거셨는데, 이넘들이 잘 보시면 3개입니다. 같은 클래스명으로요
그렇기 때문에 3개 중에 하나를 찾아서 0, 1, 2 중에 구분을 해야한다는 거죠.
그걸 찾기 위해서, .overflow의 부모인 ul에 alt 값을 줘서 그걸 읽어서
이 .overflow 가 몇번에 해당하는 지 찾는거에요.
이제 그 번호를 알았으면 탭에서 lastest_con_번호
이런 식으로 찾아서 css를 바꿔주는 거죠.
때문에, jquery는 반복문 밖으로 빼내시고,
ul에 alt를 추가해서 번호를 적어주시고,
jquery는 제가 적어드린대로 해주세요.
<ul> <li style="" class="latest_con_1"> <strong class="lt_title" data-no="">NOTICE</strong> </li> <li style="" class="latest_con_2"> <strong class="lt_title" data-no="">NEWS</strong> </li> <li style="" class="latest_con_3"> <strong class="lt_title" data-no="">FREEBOARD</strong> </li> </ul> <ul class="group latestGroup1" alt="1"> <li class="overflow"> <p class="leftFloat">노티스내용</p> <p class="rightFloat">2015-06-30</p> </li> </ul> <ul class="group latestGroup2" alt="2"> <li class="overflow"> <p class="leftFloat">뉴스내용</p> <p class="rightFloat">2015-06-30</p> </li> </ul> <ul class="group latestGroup3" alt="3"> <li class="overflow"> <p class="leftFloat">프리보드내용</p> <p class="rightFloat">2015-06-30</p> </li> </ul> <script> $(function() { $(".overflow").bind("mouseenter focusin", function(e) { var key = $(this).parent().attr("alt"); $("li.latest_con_" + key).css("background","gray"); }); $(".overflow").bind("mouseleave focusout", function() { var key = $(this).parent().attr("alt"); $("li.latest_con_" + key).css("background","white"); }); }); </script>댓글을 작성하려면 로그인이 필요합니다.
아래 처림 고쳐보세요. 고칠 부분만 골라서
// 맨위에 소스 ===========================
$boo_connt=0;
$groupCount = count($group);
foreach($group as $key => $value)
{
$boo_connt++;
$lt_name="latest_con_".$key; // <--이부분을 수정
...
// 아래 UL 부분에 alt 하나 추가 ===========================
<ul alt="<?php echo $key?>" class="group latestGroup<?php echo $key?> <?php echo $groupActive?>">
<li class="overflow">
<p class="leftFloat"></p>
<p class="leftFloat"></p>
</li>
// 제이쿼리수정 ===========================
$(".overflow").bind("mouseenter focusin", function(e) {
var key = $(this).parent().attr("alt");
$("li.latest_con_" + key).css("background","gray");
});
$(".overflow").bind("mouseleave focusout", function() {
var key = $(this).parent().attr("alt");
$("li.latest_con_" + key).css("background","white");
});
답변에 대한 댓글 1개
저 부분의 소스 보기를 하면
// 탭부분
<ul class="latestGroupTit">
<li style="width: 117.33333333333px;" class="latest_con_0">
<strong class="lt_title" data-no="0">
NOTICE </strong>
</li>
<li style="width: 116.33333333333px;" class="latest_con_1">
<strong class="lt_title" data-no="1">
NEWS </strong>
</li>
<li style="width: 116.33333333333px;" class="latest_con_2">
<strong class="lt_title" data-no="2">
FREEBOARD </strong>
</li>
</ul>
// 파랑 네모박스 안에 글 부분
<div class="latestGroupContent">
<ul class="group latestGroup0 groupActive">
<li class="overflow">
<p class="leftFloat">
<a href="http://www.jikong064.com/bbs/board.php?bo_table=notice&wr_id=17">네번째 글 이것도 더보기가 중첩되는지 보기위…</a> </p>
<p class="rightFloat">
06-28 </p>
</li>
<li class="overflow">
<p class="leftFloat">
<a href="http://www.jikong064.com/bbs/board.php?bo_table=notice&wr_id=16">세번째 글 이건 더보기가 중첩되는지 보기 위한…</a> </p>
<p class="rightFloat">
06-28 </p>
</li>
<li class="overflow">
<p class="leftFloat">
<a href="http://www.jikong064.com/bbs/board.php?bo_table=notice&wr_id=14">그럼 제목이 두배로 길어지면 최신글에서 끊기는…<font color=#ff3061> (<spanclass="cnt_cmt">1</span>)</font></a> </p>
<p class="rightFloat">
06-28 </p>
// 제이쿼리 부분
<script type="text/javascript">
$(".overflow").bind("mouseenter focusin", function(e) {
$(".latest_con_2").css("background","gray");
});
$(".group latestGroup0 groupActive").bind("mouseleave focusout", function() {
$(".latest_con_2").css("background","white");
});
$(".overflow").bind("mouseenter focusin", function(e) {
$(".latest_con_2").css("background","gray");
});
$(".group latestGroup1 ").bind("mouseleave focusout", function() {
$(".latest_con_2").css("background","white");
});
$(".overflow").bind("mouseenter focusin", function(e) {
$(".latest_con_2").css("background","gray");
});
$(".group latestGroup2 ").bind("mouseleave focusout", function() {
$(".latest_con_2").css("background","white");
});
</script>
댓글을 작성하려면 로그인이 필요합니다.
정확하게 말 뜻이 이해가 좀 안되네요.
아래의 파란색 부분의 게시글이 3개의 카테고리의 글들이 다 있는거고, 그 해당글에 올리면 그에 해당하는 카테고리에 색이 칠해져야 된다는것인가요?
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인