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/