div를 jquery로 div를 대체하십시오.

간단한 도움이 필요합니다! div 내용을 변경하는 jquery 함수입니다.div를 jquery로 div를 대체하십시오.

기본 아이디어는 4 개의 이미지가 포함 된 div (div1)가있는 컨테이너 div를 갖는 것입니다. 나는 div div1에서 div 2까지 컨테이너 div 안의 div 내용 (fade)을 변경하는 기능을 원한다.

Div 1과 2는 동일하다. 대체되는 이미지 일뿐입니다.

<html> 
    <head> 
     <title>xx</title> 
     <link rel="stylesheet" href="stylesheet.css"> 
     <script src="jquery.js"></script> 
    <head> 
    <body> 
     <input id="doit" type="button" value="clickme"> 
     <div id="containerdiv"> 
      <div id="div1"> 
       <img class="SW">  
       <img src="Img/SW_A.jpg" height=125px width 125px > 
       <img src="Img/SW_B.jpg" height=125px width 125px > 
       <img src="Img/SW_C.jpg" height=125px width 125px > 
       <img src="Img/SW_D.jpg" height=125px width 125px > 
      </div> 
     </div> 
     <div id="div2"> 
      <img class="SW" > 
      <img src="Img/SW_E.jpg" height=125px width 125px > 
      <img src="Img/SW_F.jpg" height=125px width 125px > 
      <img src="Img/SW_G.jpg" height=125px width 125px > 
      <img src="Img/SW_H.jpg" height=125px width 125px > 
     </div> 
    <body> 
<html>

그리고 스크립트 : 여기

는 HTML입니다

$('#doit').click(function(){ 
    $('#div1').fadeOut('slow', function() { 
     $('#div1').html$('#div2') 
     $('#div1').fadeIn('slow'); 
    });  
});

내가 DIV2에 대한 내용으로 간단한 텍스트를 넣을 때이 기능은 작동하지 않습니다 :

$('#doit').click(function(){ 
    $('#div1').fadeOut('slow', function() { 
     $('#div1').html('my new content') 
     $('#div1').fadeIn('slow'); 
    });  
});

그러나 div가 텍스트가 아니라 새로운 비슷한 div로 대체되기를 바랍니다! 이 간단한 코드에 대해 jquery를 많이 검색했지만 찾고있는 것을 찾을 수없는 것 같습니다.

또한 함수에서로드하기 전에 페이지에서 div2의 내용을 숨기는 방법을 찾아야합니다.

도움이 될 것입니다.

출처

2013-08-14 Laura Maasry

은 나중에로 돌아갑니다 DOM에 div1의 내용을 유지해야하는 것인가? –

캐 러셀을 구현하려는 것 같습니다. 이미지를 변경하려면. http://getbootstrap.com/2.3.2/javascript.html#carousel을 사용하면 매우 편리하고 사용하기 쉽고 맞춤 설정할 수 있습니다.

출처

2013-08-14 22:21:38

코드가 작동하지 않는 이유는 구문이 다소 느리고 사용자가 .html() 메서드를 올바르게 사용하지 않기 때문입니다. 또한 버튼을 사용하여 컨테이너를 숨긴 다음 새 컨테이너로 다시 표시합니다. 내 jsfiddle을 참조하십시오. 그냥 원하는 경우

HTML

<input id="doit" type="button" value="clickme"> 
<div id="containerdiv"> 


<div id="div1"> 

<img class="SW">  
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSJ6LGVbd2hRo9GEemMi-EWK6e8uhifbtdanY1KotPsSr_Sut0pVw" height=125px width 125px > 
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSJ6LGVbd2hRo9GEemMi-EWK6e8uhifbtdanY1KotPsSr_Sut0pVw" height=125px width 125px > 
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSJ6LGVbd2hRo9GEemMi-EWK6e8uhifbtdanY1KotPsSr_Sut0pVw" height=125px width 125px > 
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSJ6LGVbd2hRo9GEemMi-EWK6e8uhifbtdanY1KotPsSr_Sut0pVw" height=125px width 125px > 

</div> 

</div> 

<div id="div2"> 

<img class="SW" > 
<img src="http://factoryjoe.com/projects/wordpress-icon/files/wordpress-icon-128.png" height=125px width 125px > 
<img src="http://factoryjoe.com/projects/wordpress-icon/files/wordpress-icon-128.png" height=125px width 125px > 
<img src="http://factoryjoe.com/projects/wordpress-icon/files/wordpress-icon-128.png" height=125px width 125px > 
<img src="http://factoryjoe.com/projects/wordpress-icon/files/wordpress-icon-128.png" height=125px width 125px > 

</div>

CSS

#div1{ } 
#div2{ display: none; }

물론

$(function(){ 
    $('#doit').click(function(){ 
     $('#containerdiv').fadeOut('slow', function() { 
      $('#containerdiv').html($('#div2').html()); 
      $('#containerdiv').fadeIn('slow'); 
     }); 
    }) 
});

jQuery를,이다 div1에서 div2으로 전환하십시오. 더 많은 기능을 원한다면 코드를 더 확장해야합니다.

출처

2013-08-14 22:28:49

나는 이렇게 .replaceWith()를 사용할 것입니다. 그러나 다시 한 번 다른 주 (州) 아래의 포스터로 회전식 기능을 구현하려고 할 수 있습니다. 이것이 사실이라면 나는 바퀴를 재발견하는 것을 귀찮게하지 말라.

당신이 뭘 하려는지의

간단한 버전 :

는

HTML :

<input id="doit" type="button" value="clickme"> 
<div id="div1"> 
    <img src="http://placehold.it/125x125"/> 
    <img src="http://placehold.it/125x125"/> 
    <img src="http://placehold.it/125x125"/> 
    <img src="http://placehold.it/125x125"/> 

</div> 

<div id="div2" class="hidden"> 
    <img src="http://placehold.it/125x125"/> 
    <img src="http://placehold.it/125x125"/> 
    <img src="http://placehold.it/125x125"/> 

    </div>

자바 스크립트 :

$('#doit').click(function(){ 
    $('#div1').fadeOut('slow', function() { 
    $('#div1').replaceWith($('#div2')); 
    $('#div2').removeClass('hidden'); 
    $('#div1').fadeIn('slow'); 
});  
})

샘플 CSS :

.hidden { 
    display:none; 
    background-color:red; 
}

먼저 사업부는 4가 이미지, cl의 두 번째 div ICK는 (내가 사용하기 좋은 샘플 이미지를 didnt가로 성별을 설정합니다)

http://jsfiddle.net/m9qAY/1/

출처

2013-08-14 22:30:06 adaam

Adaam, 정확히 내가 찾고 있던 것이고, 효과가있었습니다. 이제는 div1로 되돌아 가도록 버튼을 만들었습니다. (같은 것을 'doitback'이라고 부르 자고) 같은 페이드 효과를냅니다. 단, 버튼을 추가하고 div를 전환 할 때 div1 콘텐츠를 다시 표시 할 수 없습니다. 이것에 대한 제안이 있으면 완벽 할 것입니다. –

차라리과 그들을 움직이는 것보다, 컨테이너에 둘 다 넣어 것 3 개 이미지를 가지고있다. 그런 다음 한 번에 하나씩 보여주십시오. 자극 페이튼의 바이올린에 건물 : http://jsfiddle.net/kFQ4q/1/

$(function() { 
    var vis = 1; 
    $('#doit').click(function() { 
     $('#containerdiv').fadeOut('slow', function() { 
      $('#div'+vis).hide(); 
      vis = vis === 1 ? 2 : 1; 
      $('#div'+vis).show(); 
      $('#containerdiv').fadeIn('slow'); 
     }); 
    }) 
});

출처

2013-08-14 22:52:57

div를 jquery로 div를 대체하십시오.

답변

관련 문제