0

この例で .zoom をクリックすると、20 (ループ内のアイテムの量) の .big_image div が挿入されます。クリックしているアイテムに関連して、1つ挿入したいだけです。

$('.main img').each(function() {
var img = this;
$('.zoom').click(function() {
    $(this).after('<div class="big_image"><img src="'+$(img).attr('src')+'"></div>');
});
});

ここでスクリプトを単純化しました。理想的には、質問に関係のない他のことが起こっているので、クリック機能を変更する方法を知りたいだけです(可能であれば)。ありがとう！

編集:ここでの作業例。

ズーム ボタンは、少なくともギャラリーの最初の 2 つの画像 (左上隅) に表示する必要があります。紛らわしい場合は、ズーム ボタンが非常に長い/背の高い画像にのみ表示されるようにしようとしています。また、 setClass 関数を分割する必要があることも認識していますが、その方法をまだ学んでいません:)

4

2 に答える 2

0 
$('.zoom').click(function(e){
     var imgURL= $(this).parents('.main').find('img').attr('src');
     $(this).after('<div class="big_image"><img src="'+imgURL+'"></div>')
});

コンテナが.main両方の直接の親であり、img使用.zoomできる場合

var imgURL= $(this).siblings('img').attr('src');

ループ内にある必要がある場合。以下のようにコードを変更してみてください

 var flag=false;
 $('.main img').each(function() {
   var img = this;
    $('.zoom').click(function() {
     if(!flag)
        $(this).after('<div class="big_image"><img src="'+$(img).attr('src')+'"></div>');
     flag=true;
   });
 });
于 2013-09-02T15:27:14.170 に答える