for 반복문 안에 제이쿼리 hover 를 적용할려고 합니다.....
$(function() {
$('#middle_hover').hover(function() {
$('.hover_con').fadeIn('fast');
},
function(){
$('.hover_con').fadeOut('fast');
}
);
});
스크립트는 for문안에 넣는게 아니라고 하는데
위 hover 기능을 적용할려면 어떻게 해야하는지요??
|
답변 4개 / 댓글 3개
채택된 답변
+20 포인트
2016-10-17 (월) 12:33:07
정 그러시다면 셀렉터만 바꾸면 될듯합니다.
아이디가 만약 m3_hover_1,m3_hover_2,m3_hover_3 이런 식으로 진행 된다면
$('li[id^=m3_hover_]') 이렇게 ....
그리고. "하단에 for문을 스크립트 안에다가도 추가로 넣어 function 안에서 추가 발생될수 있게 해주시면 되지 않을까 싶습니다."
하단에 for 문이라 하심은 each 를 말씀하시는거 맞죠 ?
Copy
$(function() {
$('li[id^=m3_hover_]').each(function(){
$(this).hover(function() {
$('.m3_po',this).fadeIn('fast');
},
function(){
$('.m3_po',this).fadeOut('fast');
});
});
});
2016-10-17 (월) 13:28:13
답변 주신분들 정말 감사합니다..
2016-10-17 (월) 13:08:08
php에서 for로 돌린 후에 나온 html을 보여 주세요.
그게 제일 정확하게 답변이 나옵니다.
2016-10-17 (월) 12:01:38
질문은 잘 이해가 안되지만....
반복문이라 하시니까. 이런걸 원하시는건가요 ?
html 내용까지 확인 시켜 주시는게 좋을 것 같습니다...
아니면 정확한 설명이...
Copy
$(function() { $('#middle_hover').each(function(){ $(this).hover(function() { $('.hover_con').fadeIn('fast'); }, function(){ $('.hover_con').fadeOut('fast'); }); });});답변에 대한 댓글 3개
2016-10-17 (월) 12:13:26
2016-10-17 (월) 12:23:00
저걸 눈치 못챘네요....
m3_hover 아이디가 반복 되고 있습니다. 아이디는 한개의 html 상에 중복되는 건 없어야 합니다 ID 를 클래스로 바꾸시고 저 구조를 그대로 사용했을 시 아래와 같이 사용하시면 되겠습니다.
[code]
$(function() {
$('.m3_hover').each(function(){
$(this).hover(function() {
$('.m3_po',this).fadeIn('fast');
},
function(){
$('.m3_po',this).fadeOut('fast');
});
});
});
[/code]
m3_hover 아이디가 반복 되고 있습니다. 아이디는 한개의 html 상에 중복되는 건 없어야 합니다 ID 를 클래스로 바꾸시고 저 구조를 그대로 사용했을 시 아래와 같이 사용하시면 되겠습니다.
[code]
$(function() {
$('.m3_hover').each(function(){
$(this).hover(function() {
$('.m3_po',this).fadeIn('fast');
},
function(){
$('.m3_po',this).fadeOut('fast');
});
});
});
[/code]
2016-10-17 (월) 12:23:56
for문에 넣으실때 m3_hover를 고정이름으로 해서 두시면 안될듯 하고요
for문에 넣게되면 id값을 증가값으로 주면서 스크립트를 안에 넣으시되 하단에 for문을 스크립트 안에다가도 추가로 넣어 function 안에서 추가 발생될수 있게 해주시면 되지 않을까 싶습니다.
for문에 넣게되면 id값을 증가값으로 주면서 스크립트를 안에 넣으시되 하단에 for문을 스크립트 안에다가도 추가로 넣어 function 안에서 추가 발생될수 있게 해주시면 되지 않을까 싶습니다.
답변을 작성하려면 로그인이 필요합니다.
$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>
이렇습니다.