0

链接到 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;
    }

我有一些问题。

我如何继续让#ball 淡出，直到它们全部消失？

我怎样才能使篮球倍增，而不是每次我想要一个球时都必须投入？

4

1 回答 1

0

将 id 更改为 class。它无法正常工作，因为您一次只能拥有一个 ID。这是一个活生生的例子：http: //jsfiddle.net/qh7St/2/

  $('.ball').click(function()

  <div class="ball"></div>

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

于 2013-05-06T04:17:43.007 回答