HTML jQuery通過縮略圖改變段落文字和圖片

Question

我剛開始在我的網站中使用jQuery，它有一個像一堆縮略圖一樣的網站。當我點擊一個縮略圖時，我想讓圖片在相關文本的新div框中打開。我設法改變了div框中的圖像，所以它適合它的縮略圖，但我似乎無法弄清楚如何用它來改變文本。這是一個相對較長的文字，在eath圖像下方，我希望每個縮略圖都有不同的文字和圖像。

這裏是我的HTML：

<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'); 
     }); 
    }); 
}; 

Answer 1

我不能完全確定，如果我明白你的問題。

但是我認爲你需要在點擊圖像時改變「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/