HTML jQuery通过缩略图用图像更改段落文本答案

【问题标题】：HTML jQuery change paragraph text with image by a thumbnailHTML jQuery通过缩略图用图像更改段落文本
【发布时间】：2013-02-22 21:53:44
【问题描述】：

我刚开始在我的网站中使用 jQuery，它有一个类似画廊的网站，里面有一堆缩略图。当我单击缩略图时，我希望图片在带有相关文本的新 div 框中打开。我已经设法更改了 div 框中的图像，所以它适合它的缩略图，但我似乎无法弄清楚如何用它来更改文本。这是图片下方相对较长的文字，我希望每个缩略图都有不同的文字和图片。

这是我的 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');
        });
    });
};

【问题讨论】：

你用的 text_02 类在哪里？

标签： jquery html image replace paragraph

【解决方案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/

【讨论】：