2013-03-07 3 views
1

엄지 손톱이있는 사이트와 같은 갤러리가있는 내 사이트에서 jQuery를 사용하기 시작했습니다. 축소판을 클릭하면 그림이 관련 텍스트가있는 새 div 상자에서 열리겠습니다. div 상자의 이미지를 변경하여 축소판 그림에 맞 춥니 다. 그러나 텍스트를 변경하는 방법을 알아낼 수 없습니다. 그것은 eath 이미지 아래에 상대적으로 긴 텍스트이고, 나는 각 섬네일이 다른 텍스트와 이미지를 갖기를 원합니다. 여기HTML jQuery 작은 그림으로 이미지가있는 단락 텍스트 변경

<div id="showcontent"> 
    <h1 class="content_header">HEADER</h1> 
    <img class="content_image" src="img/image_01_large.png" alt="" /> 
    <p class="text_01"> 
     texttexttext 
    </p> 
    <p class="text_02"> 
     text text text 
    </p> 
</div> 
<div id="thumbnails"> 
    <p> 
<img src="img/image_01_thumb.png" alt=""/> 
<img src="img/image_02_thumb.png" alt=""/> 
    <img src="img/image_03_thumb.png" alt=""/> 
    <img src="img/image_04_thumb.png" alt=""/> 
    </p> 
</div> 

그리고 내 jQuery 코드입니다 : 내가 질문을 이해한다면 완전히 확실하지 않다

function viewContent(){ 
    $(document).ready(function(){ 
     $('#thumbnails img').click(function(){ 
      $('.content_image').attr('src',$(this).attr('src').replace('thumb','large')); 
      $('#showcontent p').attr('class').replace('.text_01', '.text_02'); 
     }); 
    }); 
}; 
+0

어디가 그것을 대체 text_02 클래스는 무엇입니까? – tymeJV

답변

0

여기 내 HTML입니다.

그러나 이미지를 클릭하면 "text_01"안의 텍스트를 변경해야한다고 생각합니다.

이미지와 관련된 텍스트가 있어야하므로 alt 속성을 사용합니다.

$(document).ready(function(){ 
    $('#thumbnails img').click(function(){ 
     $('.content_image').attr('src',$(this).attr('src').replace('thumb','large')); 
     $('#showcontent p').html($(this).attr("alt")); 
    }); 
}); 

http://jsfiddle.net/vinaylobo/KFM4w/3/