Question

链接到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全部消失，我该如何继续让#ball消失？

我怎样才能多次打篮球而不必每次都想要一个球？

Answer 1

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

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

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

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

如何继续允许用户点击直到某一点？

1 个答案: