0

jQueryで同じことを行う方法についての答えを見つけましたサムネイルをクリックして大きな画像を表示/非表示にする方法は? 、しかし、Javascriptだけで同じことをする方法を知りたい.

jQuery では $(this) を使用して、クリックした画像がより大きな画像になるように指定できますが、jQuery なしで同等のものはありますか?

HTML

<ol>
    <li class="thumbs">
        <img src="images/thumbnails/t__01.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__02.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__03.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__04.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__05.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__06.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__07.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__08.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__09.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__10.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__11.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__12.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__13.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__14.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__15.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__16.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__17.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__18.jpg" alt="">
    </li>
</ol>
<div id="gallery"><img src="images/thumbnails/t__01.jpg" alt="">
</div>

CSS だけを使用して li 画像を画像 ID にリンクできると考えていましたが、それを押すと、前のページではなく前の画像に戻ってしまいます。

それを行う1つの方法は、各画像で使用することです。changeImage() は、現在の大きな画像をクリックした画像に変更します。親指がアクティブな画像をクリックした場合、何も起こりません。それ以外の場合は、#gallery img src をクリックしたサムの src に変更します。

ただし、それをコードに変換する方法がわかりません。ありがとう

4

2 に答える 2

0

li各タグに一意の ID を添付します。

<li class="thumbs" id="unique1" onclick="function_name(this.id)">
        <img src="images/thumbnails/t__01.jpg" alt="">
    </li>

JavaScriptコードはこちら

function function_name(test_id){
    var _img = document.getElementById("test_id");
    //code to show the corresponding image
}
于 2013-08-14T14:40:55.583 に答える