for 문 안에 제이쿼리

2016.10.17 11:09:25 3754 (210.♡.♡.36)

본문

for 반복문 안에 제이쿼리 hover 를 적용할려고 합니다.....

$(function() {
    $('#middle_hover').hover(function() {
        $('.hover_con').fadeIn('fast');
      },
      function(){
        $('.hover_con').fadeOut('fast');
      }
   );
});

스크립트는 for문안에 넣는게 아니라고 하는데

위 hover 기능을 적용할려면 어떻게 해야하는지요??

#제이쿼리

답변 4

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

2016-10-17 12:33:07 121.♡.♡.161

정 그러시다면 셀렉터만 바꾸면 될듯합니다.

아이디가 만약 m3_hover_1,m3_hover_2,m3_hover_3 이런 식으로 진행 된다면

$('li[id^=m3_hover_]') 이렇게 ....

그리고. "하단에 for문을 스크립트 안에다가도 추가로 넣어 function 안에서 추가 발생될수 있게 해주시면 되지 않을까 싶습니다."

하단에 for 문이라 하심은 each 를 말씀하시는거 맞죠 ?

 
$(function() {
    $('li[id^=m3_hover_]').each(function(){	
		$(this).hover(function() {
			$('.m3_po',this).fadeIn('fast');
		},
		function(){
			$('.m3_po',this).fadeOut('fast');
		});
	});
});

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

2016-10-17 12:01:38 121.♡.♡.161

질문은 잘 이해가 안되지만....

반복문이라 하시니까. 이런걸 원하시는건가요 ?

html 내용까지 확인 시켜 주시는게 좋을 것 같습니다...

아니면 정확한 설명이...


$(function() {
    $('#middle_hover').each(function(){
	
		$(this).hover(function() {
			$('.hover_con').fadeIn('fast');
		},
		function(){
			$('.hover_con').fadeOut('fast');
		});
	});
});

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

2016-10-17 12:13:26210.♡.♡.36

for ($i=0; $i<4; $i++) { //반목문
$list = explode("|", $middle_m3[$i]); //배열분리
//$list[0] : 화일명
//$list[1] : 대제목
//$list[2] : 소제목
//$list[3] : 링크

if ($i == 0 || $i == 1) {
$sty = " bottom:214px;left:0;";
if ($i == 1) $sty = " bottom:0;left:0;";

$sty1 = " width:200px;height:200px; ";

}elseif ($i == 2 || $i == 3) {
$sty = " bottom:325px;right:0;";
if ($i == 3) $sty = " bottom:0;right:0;";

$sty1 = " width:310px;height:310px; ";
}

echo "<li style='".$sty.$sty1."' id='m3_hover'>";
echo "<img src='".$pf."/middle/m3_".$list[0].".png'>";
echo "<div style='display:none;".$sty1."' class='m3_po'>"; //오버시 시작
echo "<p style='".$sty1."'>";
echo "<h2>".$list[1]."{$i}</h2>";
echo ".$list[2].$i.";
if ($list[3] != "#") {
echo "<a href='".$list[3]."'>more</a>";
}else{
echo "";
}
echo "</p></div>"; //오버시 끝
echo "</li>";
} //for

<script type="text/javascript">

$(function() {
$('#m3_hover').each(function(){
$(this).hover(function() {
$('.m3_po').fadeIn('fast');
},
function(){
$('.m3_po').fadeOut('fast');
});
});
});
</script>

이렇습니다.

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

2016-10-17 12:23:00121.♡.♡.161

저걸 눈치 못챘네요....

m3_hover 아이디가 반복 되고 있습니다. 아이디는 한개의 html 상에 중복되는 건 없어야 합니다 ID 를 클래스로 바꾸시고 저 구조를 그대로 사용했을 시 아래와 같이 사용하시면 되겠습니다.


$(function() {
    $('.m3_hover').each(function(){
	
		$(this).hover(function() {
			$('.m3_po',this).fadeIn('fast');
		},
		function(){
			$('.m3_po',this).fadeOut('fast');
		});
	});
});

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

2016-10-17 12:23:56118.♡.♡.75

for문에 넣으실때 m3_hover를 고정이름으로 해서 두시면 안될듯 하고요
for문에 넣게되면 id값을 증가값으로 주면서 스크립트를 안에 넣으시되 하단에 for문을 스크립트 안에다가도 추가로 넣어 function 안에서 추가 발생될수 있게 해주시면 되지 않을까 싶습니다.