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/

HTML jQuery通过缩略图更改段落文本与图像

1 个答案: