我如何继续让用户点击，直到某一点

链接到JSFiddle: http://jsfiddle.net/jbirdwell/YEmat/1/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script src='script.js'></script>
        <title></title>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <img src = "http://www.nba.com/media/playerfile/thunder_logo.gif"/><img id="champion" src="http://farm5.staticflickr.com/4018/4624684843_1630196e78.jpg"/><div id="ball"></div>&nbsp;<div id="ball"></div>&nbsp;<div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div> <div id="ball"></div>  
                </td>
            </tr>
        </table>
    </body>
</html>

JavaScript:

var ball = 11;
$(document).ready(function() {
    $('#ball').click(function(){
        $(this).fadeOut();
        ball -= 1;
        if(ball === 0){
            $('#champion').css("display",'inline-block');
        }
    });

});

CSS:

#ball{
        background-color: orange;
        height: 30px;
        width: 30px;
        border-radius: 100%;
        border: 1px solid #FF8A21;
        display: inline-block;
}
#champion{
    display: none;
    width: 45px;
    }

我有几个问题。

我如何继续让#球淡出，直到他们都消失了?

我怎样才能把篮球叠起来而不是每次我想要球的时候都放进去?

将id改为class。它不能正常工作，因为你一次只能有一个ID。下面是一个实例:http://jsfiddle.net/qh7St/2/

  $('.ball').click(function()
  <div class="ball"></div>

我不确定我是否完全理解你的第二个问题。你的意思是如何动态地添加球而不是硬编码?

相关内容

最新更新

热门标签：