私は webapp を構築しています (javascript は初めてです)。.click リスナーが接続されているものをクリックすると、jquery は何もしません。さらに、アニメーション化されません。私は何か間違ったことをしています、そして何が理解できません。
コード:
function loadTabBar()
{
person = false;
sale = false;
current = false;
wine = false;
if(!person && !sale && !current && !wine)
{
justOpened();
}
function useTabBar(){
$('#PersonDiv').click(function()
{
alert('hi')
activatePerson();
});
$('#Current').click(function()
{
activateCurrent();
});
$('#Sale').click(function()
{
activateSale();
});
$('#Wine').click(function()
{
activateWine();
});
function activatePerson()
{
if(!person)
{
var newImg="#Person";
if(sale)
{
var oldImg="#Sale"
changeImg(oldImg, newImg);
}
if(wine)
{
var oldImg="#Sale"
changeImg(oldImg, newImg);
}
if(current)
{
var oldImg="#Sale"
changeImg(oldImg, newImg);
}
person = true;
current = false;
wine = false;
sale = false;
}
}
function activateSale()
{
if(!sale)
{
var newImg="#Sale"
if(person)
{
var oldImg="#Person"
changeImg(oldImg, newImg);
}
if(wine)
{
var oldImg="#Wine"
changeImg(oldImg, newImg);
}
if(current)
{
var oldImg="#Current"
changeImg(oldImg, newImg);
}
person = false;
current = false;
wine = false;
sale = true;
}
}
function activateWine()
{
if(!wine)
{
var NewImg = "#Wine"
if(sale)
{
var oldImg="#Sale"
changeImg(oldImg, newImg);
}
if(person)
{
var oldImg="#Person"
changeImg(oldImg, newImg);
}
if(current)
{
var oldImg="#Current"
changeImg(oldImg, newImg);
}
person = false;
current = false;
wine = true;
sale = false;
}
}
function activateCurrent()
{
var newImg = "#Current";
if(!current)
{
if(sale)
{
var oldImg="#Sale"
changeImg(oldImg, newImg);
}
if(wine)
{
var oldImg="#Wine"
changeImg(oldImg, newImg);
}
if(person)
{
var oldImg="#Person"
changeImg(oldImg, newImg);
}
person = false;
current = true;
wine = false;
sale = false;
}
}
function changeImg(oldImg, newImg)
{
$(oldImg).fadeOut('fast', function()
{
$(this).attr('src', ('http://www.jagspcmagic.com/' + oldImg.substring(1) + '1.png'), function(){
if(this.complete) $(this.fadeIn('fast'));
});
})
$(newImg).fadeOut('fast', function()
{
$(this).attr('src', ('http://www.jagspcmagic.com/' + oldImg.substring(1) + '2.png'), function(){
if(this.complete) $(this.fadeIn('fast'));
});
})
}
}function justOpened()
{
$('#Person').fadeOut('fast', function()
{
$('#Person').attr('src', 'http://www.jagspcmagic.com/Person2.png', function(){
$(this.fadeIn('fast'));
});
})
person = true;
useTabBar();
}}
JSfiddle: (ひどいグラフィックは気にしないでください。実際のグラフィックにはまだ著作権がないため、アップロードしたくありませんでした。http://jsfiddle.net/hFBMB/ )