1

したがって、画像に id タグがあれば問題なくこれを行う方法を知っていますが、ID タグなしでこれを行う方法がわかりません。

http://jsfiddle.net/2GwEm/

サムネイルをクリックして大きな画像を変更したい。

問題:

  1. 画像の量はさまざまなので、すべての要素にクリック イベントを追加する方法を期待しています。

  2. 画像には id タグがありません

  3. javascriptとjqueryだけでhtmlを直接編集することはできません。

メイン写真:

  <div id="IDX-primaryPhoto" class="IDX-detailsPhotoWrap">
  <a href="">
  <img src="CAT9536786.jpg" id="IDX-detailsPhoto">
 </a>
 </div>

サムネイル:

 <div id="IDX-detailsShowcase">

    <div class="IDX-showcaseSlide" id="IDX-detailsImage1">
        <div class="IDX-showcaseContent">
        <img alt="Property Photo" src="CAT9536786.jpg" class="IDX-detailsShowcaseImage">
        </div>
    </div>

    <div class="IDX-showcaseSlide" id="IDX-detailsImage2">
        <div class="IDX-showcaseContent">
        <img alt="Property Photo" src="CAT9536786A.jpg" class="IDX-detailsShowcaseImage">
        </div> 
    </div>

</div>
4

5 に答える 5

2

OPから要求された私の答えは次のとおりです。

サムネイルにはクラスがあります。それをjqueryセレクターとして使用できます。

$('.IDX-detailsShowcaseImage')

したがって：

$('.IDX-detailsShowcaseImage').click(function () {
    var href = $(this).prop('src'); //grab the src of the thumbnail
    $('#IDX-detailsPhoto').prop('src', href); //set it as the big image
});

jsfiddle.net/2GwEm/2

于 2013-07-26T18:03:11.080 に答える
1

イベント ハンドラーをアタッチしたり、jQuery 関数を使用したりするのに ID は必要ありません。jQuery は、必要な要素を取得するために使用および結合できる多数のセレクターを提供します。あなたの場合、画像にはすでにクラスがあるため、クラスセレクターを使用します。

$('.IDX-detailsShowcaseImage').click(your_function);
于 2013-07-26T17:54:57.493 に答える
1

jQuery では、次のようにすべての画像をクリックしてアタッチします。

$(document).on("click", ".IDX-detailsShowcaseImage img", function(){
     var img_src = $(this).attr('src')
     //your code here
});

そのため、要素を動的に作成し、<img>すべてのクリック イベントに応答して、イベントをトリガーした要素に でアクセスできます$(this)。

于 2013-07-26T17:56:10.957 に答える
1

jQueryセレクターを使用して、特定のクラス/ IDのすべての子要素を選択できます

$(".IDX-showcaseSlide img").click(function);
于 2013-07-26T17:57:54.250 に答える
0

これは ID を使用せず、すべての詳細画像で機能します。

$(".IDX-detailsShowcaseImage").click(function(arg) {
    $(".IDX-detailsPhotoWrap img").attr('src', $(arg.target).attr('src'));
});

http://jsfiddle.net/2GwEm/9/

于 2013-07-26T19:36:06.007 に答える