0

私は現在、/jQuery/JavaScript を使用してサムネイル ギャラリーを持っていますがonclick、すべて正常に動作しますが、ユーザーがサムネイルをクリックしてオンにし、もう一度クリックしてオフにしなければならないのは混乱を招くと思います。次。

現在、8 つのサムネイル/大きな画像があり、このコードを異なる ID で 8 回入力しました。

function toggle_visibility(chLoTog) {
    var e = document.getElementById(chLoTog);
    if(e.style.display == 'block')
    e.style.display = 'none';
    else
    e.style.display = 'block';
}

私はjQueryが初めてで、このコードを8回入力する必要がない方法があるに違いありません。私が本当にコードにしたいのは：

  1. サムネイルをクリックすると、関連する画像が表示されます
  2. 別のサムネイルをクリックすると、現在のサムネイルが非表示になり、新しいサムネイルが表示されます
  3. これをランダムな順序で実行できるようにします。

これがすべて理にかなっていることを願っています。

4

1 に答える 1

0

サムネイルのクラスとデータ属性を使用して、jqueryで非常に簡単に実現できます。

// HTML
// Add a class and a data attribute to the gallery thumbnal image
<img class="gallery-thumbnail" src="path/to/gallery-thumbnail.jpg" data-img="path/to/gallery-image.jpg" />

// jquery
// Bind a click function to each thumbnail image
$('.gallery-thumbnail').click(function(){
    // Hide all the currently showing gallery images
    $('.gallery-image').hide();

    // Get the id of the requested gallery image
    var id = '#' + $(this).attr('data-imge');

    // Show the requested gallery image
    $(id).show();
}):

クリック機能を各ギャラリー画像にバインドして、ユーザーが画像自体をクリックして画像を非表示にできるようにすることもできます。

// Hide gallery image when clicked
$('.gallery-image').click(function(){
    $(this).hide();
});
于 2013-02-28T21:06:39.317 に答える