onclick 이미지 바꾸기

Question

내 코드에 문제가 있습니다. 이미지/div를 클릭 할 때 다른 이미지/div로 바꾸려고합니다 (느리게 변함). 그런 다음 두 번째 이미지를 클릭하면 원래 상태로 돌아갑니다.

나는 지금까지 얻을 수 있었지만 두 가지 문제가 있습니다.

1 - 페이지로드시 두 번째 및 네 번째 이미지를 숨기지 않는 것처럼 보이므로 클릭 한 번만 표시됩니다.

2 나는 동일한 페이지에서이 작업을 여러 번 수행 할 수 있기를 원하지만 코드를 사용하면 images/div에있는 코드에서만 작동합니다.

도와주세요.

HTML

<div><!-- Page wrapper-->  

    <div id= "first"> 
     <a href="#" id="next"> 
      <img src="images/yb2.svg" style="height: 160px; width: 160px;"> 
     </a> 
    </div> 
    <div id="second"> 
     <a href="#" id="back"> 
      img src="images/ss-1a.jpg"> 
    </div> 
    <div id= "third"> 
     <a href="#" id="next1"> 
      <img src="images/yb2.svg" style="height: 160px; width: 160px;"> 
     </a> 
    </div> 
    <div id="forth"> 
     <a href="#" id="back2"> 
      <img src="images/ss-1a.jpg"> 
    </div> 

</div><!-- end of page wrapper--> 

jQuery를

$('#next').click(function(e){ 
    e.preventDefault(); 
    $('#first').fadeOut('slow', function(){ 
     $('#second').fadeIn('slow'); 
    }); 
}); 
$('#back').click(function(e){ 
    e.preventDefault(); 
    $('#second').fadeOut('slow', function(){ 
     $('#first').fadeIn('slow'); 
    }); 
}); 
$('#next1').click(function(e){ 
    e.preventDefault(); 
    $('#third').fadeOut('slow', function(){ 
     $('#second').fadeIn('slow'); 
    }); 
}); 
$('#back2').click(function(e){ 
    e.preventDefault(); 
    $('#forth').fadeOut('slow', function(){ 
      $('#first').fadeIn('slow'); 
    }); 
}); 

Answer 1

그냥 다음 조정과 Fiddle 않았다 : 1 참조) - IDS는 #second로 된 div를 숨길 및 #forth 난 그냥 CSS로 추가

#second, #forth { 
    display:none; 
} 

내가 생각한 것처럼 작동하려면 2) 대구 e는 다음과 같습니다.

$('#next').click(function (e) { 
    e.preventDefault(); 
    $('#first').fadeOut('slow', function() { 
    $('#second').fadeIn('slow'); 
    }); 
}); 
$('#back').click(function (e) { 
    e.preventDefault(); 
    $('#second').fadeOut('slow', function() { 
    $('#first').fadeIn('slow'); 
    }); 
}); 
$('#next1').click(function (e) { 
    e.preventDefault(); 
    $('#third').fadeOut('slow', function() { 
    $('#forth').fadeIn('slow'); 
    }); 
}); 
$('#back2').click(function (e) { 
    e.preventDefault(); 
    $('#forth').fadeOut('slow', function() { 
    $('#third').fadeIn('slow'); 
    }); 
});