1

私は自分のサイトで 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');
        });
    });
};
4

1 に答える 1

0

あなたの質問を理解しているかどうか完全にはわかりません。

ただし、画像をクリックしたときに「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/

于 2013-03-07T16:04:52.020 に答える