我有一个我正在制作的小型jQuery游戏的代码,默认情况下隐藏所有图片(字符)。有一个问题是“你准备好了吗?”和是或否按钮。单击“是”按钮时,它会隐藏按钮和文本。它也应该显示第一个图像,即#main。出于某种原因,它不起作用。 这是带有以下图像的jQuery代码:
$(document).ready(function(){
$('#main,#batman,#car,#hobo,#knife,#gangfight,#ganggun,#gangknife,#blood').hide(-100);
var main=$('#main');
batman=$('#batman');
car=$('#car');
hobo=$('#hobo');
cop=$('#cop');
knife=$('#knife');
gangfight=$('#gangfight');
ganggun=$('#ganggun');
gangknife=$('#gangknife');
blood=$('#blood');
document.write('<title>LOAUP</title>');
document.write('<center><h1>The life of an unlucky person</h1></center>');
document.write('<center id="start">Are you ready to play?</center>');
document.write('<center><button id="yes">Yes</button><button id="no">No</button></center>');
$('#yes').click(function(){
$('#yes,#no').hide(function(){
$('#start').hide();
$('#main').show
});
});
$('#no').click(function(){
$('#yes,#no').hide();
$('#start').hide();
document.write('<center>Ok, come back another time then.</center>');
});
});
//Images below this (HTML)
<img id='main' src='/jquery/sprites/spritePerson.png' />
<img id='batman' src='/jquery/sprites/spriteBatman.png' />
<img id='car' src='/jquery/sprites/spriteCar.png' />
<img id='hobo' src='/jquery/sprites/spriteHobo.png' />
<img id='cop' src='/jquery/sprites/spriteCop.png' />
<img id='knife' src='/jquery/sprites/spriteKnife.png' />
<img id='gangfight' src='/jquery/sprites/spriteGangFight.png' />
<img id='ganggun' src='/jquery/sprites/spriteGangGun.png' />
<img id='gangknife' src='/jquery/sprites/spriteGangKnife.png' />
<img id='blood' src='/jquery/sprites/spriteBloodPuddle.png' />
修改
以下是示例: http://jsbin.com/ocowas/1
答案 0 :(得分:0)
在您的#main点击功能更改
$('#main').show
到
$('#main').show();
您的变量列表应以逗号分隔,而不是冒号分隔。并且您可能还想通过在$符号前面添加重命名变量以使它们更明显,更容易阅读/记忆。例如,当您将选择器存储为变量时使用
var $element = $('#element'),
$element2 = $('#element2'),
$element23 = $('#element23');
此外,hide()函数不会使用您使用的负数。只需使用hide()进行即时隐藏,或隐藏(100)进行快速隐藏(2000)进行缓慢..检查:http://docs.jquery.com/Effects/hide
要在不使用document.write的情况下将html附加到文档中,您可以将html存储为变量,然后选择body标签或任何其他标记,并将html附加/前置或替换为html,例如。
$('body').append(yourHTMLvar);
$('body').prepend(yourHTMLvar);
$('body').html(yourHTMLvar);
'title'标签应该只出现在html文档的'head'标签之间。请使用标题标记,将“h1”改为“h6”。 据我所知,html'center'标签也已弃用。尝试使用'span','p'或甚至'div'代替。