これが必要なものであることがわかりましたが、最後のクリックで最初の元の画像に戻すことができる必要があります。
最初の画像があり、クリックして変更し、もう一度クリックして最初の画像を表示する必要があります。
ここにフィドルへのリンクがあります http://jsfiddle.net/maniator/Sevdm/
これが必要なものであることがわかりましたが、最後のクリックで最初の元の画像に戻すことができる必要があります。
最初の画像があり、クリックして変更し、もう一度クリックして最初の画像を表示する必要があります。
ここにフィドルへのリンクがあります http://jsfiddle.net/maniator/Sevdm/
src
古い値を変数に格納できます。
$(function() {
var old_img = '';
$('.menulink').click(function(e){
e.preventDefault();
if(old_img == '') {
old_img = $("#bg").attr('src');
$("#bg").attr('src',"http://placehold.it/333/3ef/img/picture1.jpg");
} else {
$("#bg").attr('src', old_img );
old_img = '';
}
});
});
JS 要素に任意のプロパティを格納できるという事実を利用できます。たとえば、次のようになります。
$(function() {
$('.menulink').on('click', function() {
var img = document.getElementById('bg');
if (img.old) { // restore the original
img.src = img.old;
delete img.old;
} else { // store original, and change
img.old = img.src;
img.src = 'http://.../';
}
return false;
});
});
別の解決策として、すべての画像を html に保持し、必要に応じてさらに追加することができます。
<a href="" title="Switch" class="menulink">switch me</a>
<img src="http://placehold.it/333/3ef/img/picture1.jpg"/>
<img src="http://placehold.it/333/fe3/img/picture2.jpg"/>
そしてJavaScript(これはあまりスケーラブルではありませんが、まともな出発点です):
$(function() {
var currentImage = 0;
$('img').not(':first').hide(0);
$('.menulink').click(function(e){
e.preventDefault();
$('img').eq(currentImage).hide(0);
currentImage = currentImage >= $('img').length-1 ? 0 : currentImage+1
$('img').eq(currentImage).show(0);
});
});
フィドルを参照してください: http://jsfiddle.net/e95K5/