그누보드 QA - 제이쿼리 질문 있습니다~

제이쿼리 질문 있습니다~

LoveDoctor 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2015.07.02 14:21:32 조회 4417 (122.♡.♡.79)

본문

제이쿼리 위의 사진처럼 아래 파랑색 박스 영역에 마우스를 올리면 해당 마우스 영역안의 탭메뉴 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");
  });

어떻해 해야 하나요 ~~?? 좀 알려주세요~~

#html #css #jquery

답변 4

야식금지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2015-07-02 16:19:57 125.♡.♡.176

왜 이렇게 만드셨을까나...싶네요.

아래쪽 파란박스는 1개고, 위에 변해야 할 탭은 3개인데,

3개중에 어떤 걸 색을 바꿔야되죠? 그 기준이 뭔지 모르겠네요.

탭이라고 하면 위를 선택해서 아래를 바꾸는게 아닌지;;;

의도는 모르겠으나 원인만 추정해보자면.

위의 foreach 문에서 $lt_name 을 생성하는데, 당연히 반복문의 마지막께

최종적으로 $lt_name에 저장되겠죠.

jquery에서 그대로 $lt_name 이라고 썼으니 맨 끝 탭만 색깔이 바뀌는 거라 보여지네요.

↳ LoveDoctor 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2015-07-02 20:42:29112.♡.♡.177

notice, news, freeboard 의 탭으로 나뉘어서 각각의 내용들을 불러오고 있어요. 그래서 notice 탭위로 마우스를 올리면 notice의 글을 불러오고 news 의 탭위로 마우스를 올리면 news 의 글을 불러오고 freeboard 탭위로 마우스를 올리면 freeboard 의 글들을 불러오는데요, 여기서 notice 의 글 위로 마우스를 올리면 notice 의 색깔이 바껴야 해요. 아래를 바뀌는게 아니라 위의 탭의 색이 바껴야 해서 제이쿼리로 css 값을 notice 의 class 이름을 지정해줬어요.. 매개변수로 값을 변경하고 싶어도 제가 제이쿼리 초보로 잘 안됩니다. ㅜㅜ 어떻해 해야하는지 조언좀 해주시면 감사하겠습니다~

↳ LoveDoctor 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2015-07-02 20:46:47112.♡.♡.177

파랑색 영역안에 소스 부분이
<?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">

<?php
//echo $value['list'][$i]['icon_reply']." ";
echo "<a href=\"".$value['list'][$i]['href']."\">";
if ($value['list'][$i]['is_notice'])
echo "".$value['list'][$i]['subject']."";
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 " (".$value1.")";
}

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'];
?>


<?php echo date('m-d', strtotime($value['list'][$i]['datetime'])); ?>

</li>
<?php } ?>
<?php if (count($value['list']) == 0) { //게시물이 없을 때 ?>
<li>게시물이 없습니다.</li>
<?php } ?>
</ul>

이렇게 되어있습니다.

용좌 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2015-07-02 16:16:13 125.♡.♡.176

정확하게 말 뜻이 이해가 좀 안되네요.

아래의 파란색 부분의 게시글이 3개의 카테고리의 글들이 다 있는거고, 그 해당글에 올리면 그에 해당하는 카테고리에 색이 칠해져야 된다는것인가요?

↳ LoveDoctor 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2015-07-02 20:37:13112.♡.♡.177

네. 저 네모박스의 내용이 탭을 기준으로 해서 나누어져 있습니다. 그래서 notice 위로 마우스를 올리면 notice 의 내용을 불러오고 news 탭으로 가면 news 내용을 불러오고 freeboard 위로 마우스를 올리면 그 내용을 불러오는데요.. 여기서 notice 탭으로 가서 notice 글위로 마우스를 올리면 notice 탭의 색깔이 바껴야 하는겁니다~

야식금지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2015-07-03 13:56:55 125.♡.♡.176

아래 처림 고쳐보세요. 고칠 부분만 골라서

// 맨위에 소스 ===========================

$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>

// 제이쿼리수정 ===========================

$(".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");

});

↳ LoveDoctor 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2015-07-03 15:59:11122.♡.♡.79

잘 안되네요.. ;; 여전히 3번째 탭부분에만 css 가 적용되고 다른 탭부분에 백그라운드 배경색이 안 바껴요
저 부분의 소스 보기를 하면

// 탭부분
<ul class="latestGroupTit">
<li style="width: 117.33333333333px;" class="latest_con_0">

NOTICE 
</li>
<li style="width: 116.33333333333px;" class="latest_con_1">

NEWS 
</li>
<li style="width: 116.33333333333px;" class="latest_con_2">

FREEBOARD 
</li>
</ul>

// 파랑 네모박스 안에 글 부분
<div class="latestGroupContent">
<ul class="group latestGroup0 groupActive">
<li class="overflow">

<a href="http://www.jikong064.com/bbs/board.php?bo_table=notice&wr_id=17">네번째 글 이것도 더보기가 중첩되는지 보기위…</a> 

06-28 
</li>
<li class="overflow">

<a href="http://www.jikong064.com/bbs/board.php?bo_table=notice&wr_id=16">세번째 글 이건 더보기가 중첩되는지 보기 위한…</a> 

06-28 
</li>
<li class="overflow">

<a href="http://www.jikong064.com/bbs/board.php?bo_table=notice&wr_id=14">그럼 제목이 두배로 길어지면 최신글에서 끊기는… (<spanclass="cnt_cmt">1)</a> 

06-28 

// 제이쿼리 부분
<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>

야식금지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2015-07-04 13:55:30 121.♡.♡.6

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>

답변을 작성하시기 전에 로그인 해주세요.

제이쿼리 질문 있습니다~

QA

제이쿼리 질문 있습니다~

본문

이 질문에 댓글 쓰기 :

답변 4

야식금지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

↳ LoveDoctor 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

↳ LoveDoctor 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

용좌 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

↳ LoveDoctor 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

야식금지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

↳ LoveDoctor 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

야식금지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

회원로그인