제이쿼리 질문 있습니다~
본문
제이쿼리 위의 사진처럼 아래 파랑색 박스 영역에 마우스를 올리면 해당 마우스 영역안의 탭메뉴 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 이라고 썼으니 맨 끝 탭만 색깔이 바뀌는 거라 보여지네요.
정확하게 말 뜻이 이해가 좀 안되네요.
아래의 파란색 부분의 게시글이 3개의 카테고리의 글들이 다 있는거고, 그 해당글에 올리면 그에 해당하는 카테고리에 색이 칠해져야 된다는것인가요?
아래 처림 고쳐보세요. 고칠 부분만 골라서
// 맨위에 소스 ===========================
$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");
});
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>