クリックしてjQueryで画像を変更すると動作しません

Question

jQueryで画像を変更する際に問題があります。 私はマークアップを次ています

<div class="row"> 
    <img src="image.png" class="download-image regular-image" /> 
    <div class="options"> 
     <p>download</p> 
    </div> 

    <img src="image.png" class="download-image regular-image" /> 
    <div class="options"> 
     <p>download</p> 
    </div> 
</div> 

と、このマークアップを操作するためのコードを次

$('.regular-image').hover(function() { 
    $(this).attr('src', 'image2.png'); 
}. function() { 
    $(this).attr('src', 'image.png'); 
} 

このコードはかなりstraightfowardであり、私はそれで問題がないが、最近、私はアクティブなイメージを維持するために別の機能を導入（要素がクリックされた場合に現れるすなわち1）：

$('.download-image').click(function(e) { 
    e.stopPropagation(); 
    $(this).next().toggle(); 
    $('.download-image').removeClass('current'); 
    $(this).addClass('current'); 
    if ($('.download-image').hasClass('current')) { 
     $(this).hover(function() { 
       $(this).attr('src', 'image2.png'); 
     }, function() { 
       $(this).attr('src', 'image2.png'); 
     } 
    } 
} 

このチャンクの背後にある考え方は単純です - 私はしcurrentクラスを追加しましたどの要素が現時点でアクティブであるのかを追跡し、アクティブ状態を表すimage2.pngを使用して要素画像をホバーとマウスアウトで同じにするようにします。それは動作しますが、私は別の要素をクリックすると、以前にクリックされた要素は、通常の1のように動作しない（すなわち、それはホバーとマウスアウトの代わりに、それは.regular-imageクラスのためにコード化されたような演技にimage2.png属性を保持します）。私が間違ったことは？私はsolutioがばかばかしく簡単で簡単かもしれないように感じますが、私はそれを自分で見つけることはできません。どんな助けや考えも高く評価されます！ お時間をいただきありがとうございました。

UPD

私のポストを要約すると、私は現時点では到達したいのは、他の画像がクリックされたときにimage.pngに戻すimage2.pngを変更すると、それはjavascriptのコードで.regular-imageを説明した（これを変更するように振る舞うようにすることです仲間の開発者でUPD 2

image2.pngにマウスが出ている間、ホバリングとimage.pngながら）

ヘルプ私は」私は欲しい振る舞いをした。私はこれにclickイベントを変更：

$(".download-image").click(function (event) { 
    event.stopPropagation(); 
    $(this).next().toggle(); 
    $('.download-image').removeClass('current'); 
    $(this).addClass("current"); 
    $(document).delegate('.current','mouseover',function() { 
     $(this).attr("src", "/image2.png"); 
    }); 
    $(document).delegate('.current','mouseout',function() { 
     $(this).attr("src", "/image2.png"); 
    }); 
}); 

それは私が明示的に画像上に置いて、マウスのみときには動作しますが、私は戻ってimage.pngに、私は他の画像をクリックするたびにimage2.pngを変更する必要があります。

Answer 1

あなたのコード内のエラーを持っているように思えます。下記のコードを確認してください。

$('.regular-image').hover(function() { 
    $(this).attr('src', 'image2.png'); 
}, function() { 
    $(this).attr('src', 'image.png'); 
}); 

また、画像をajax呼び出しで追加する場合は、下記のコードを使用してください。

e.preventDefault(); 

代わりの

e.stopPropagation(); 

も、私は率直に言って午前を使用する

$(document).on('.regular-image','hover',function() { 
    $(this).attr('src', 'image2.png'); 
}, function() { 
    $(this).attr('src', 'image.png'); 
}); 

データ要素

<img data-default-image='image1.png' src='image1.png' /> 

$(document).delegate('button','click',function(){ 
    $(this).closest('img').attr('src',$(this).closest('img').data('default-image')); 
}); 

Answer 2

てみてください、あなたがでやろうとしているのか理解していません次のコード：

$(this).hover(function() { 
       $(this).attr('src', 'image2.png'); 
     }, function() { 
       $(this).attr('src', 'image2.png'); 
     } 

2つの同じ行があるはずですか？

Answer 3

（OPのために掲示される）。

クラスを削除したときに同じ時刻にsrc属性を変更して、動作を取得する方法を見つけました。私のコードは次のようになります：

$(".download-image").click(function (event) { 
    event.stopPropagation(); 
    $(this).next().toggle(); 
    $('.download-image').removeClass('current').attr('src', 'image.png'); 
    $(this).addClass("current"); 
    $(document).delegate('.current','mouseover',function() { 
     $(this).attr("src", "image2.png"); 
    }); 
    $(document).delegate('.current','mouseout',function() { 
     $(this).attr("src", "image2.png"); 
    }); 
});