Question

我在jQuery中遇到了一些问题，但在此之前让我给出一个总结。

我正在做的是模仿TF2 Drop System和Crafting，但我只启动了drop系统（对于玩它的人来说）。

对于那些不这样做的人，我基本上设置了一个机会让用户每次重复该功能时都会获得武器或箱子。

当用户获得它时，我希望没有背景图像的第一个div的背景相应地改变为武器或板条箱。

剪掉垃圾，这是我的代码：

<html>
<head>
    <link rel="icon" href="tf2.jpg"/>
    <link rel="stylesheet" href="interface.css"/>
    <title>TF2 Idler</title>
    <script src="jquery-2.1.0.js">  
        var random;
        var id;
        var items = [
            "holymackerel.png",
            "caber.jpg"
        ];  
        function update() {
            if(String($('#a1').attr('style')).indexOf(this) == -1){
                 $('#a1').css("background-image", "url('" + items[id] + "')");
            }
            else if (String($('#a2').attr('style')).indexOf(this) == -1){
                 $('#a2').css("background-image", "url('" + items[id] + "')");
            }
        }
        setInterval(function() {
            random = 100 * (Math.random());
            if (random <= 10){
                if (random < 5) {
                    id = 0;
                    update();
                }
                else if (random <= 10) {
                    id = 1;
                    update();
                }
            }
            else if (random > 10 && random <= 35) {
                //get crate
            }
        },5000);
    </script>
</head>
<body>
    <div id="invent">
        <div id="page1">
            <div class="slot" id="a1"></div>
            <div class="slot" id="a2"></div>
            <div class="slot" id="a3"></div>
            <div class="slot" id="a4"></div>
            <div class="slot" id="a5"></div>
            <div class="slot" id="a6"></div>
            <div class="slot" id="a7"></div>
            <div class="slot" id="a8"></div>
            <div class="slot" id="a9"></div>
            <div class="slot" id="a10"></div>
            <div class="slot" id="a11"></div>
            <div class="slot" id="a12"></div>
            <div class="slot" id="a13"></div>
            <div class="slot" id="a14"></div>
            <div class="slot" id="a15"></div>
            <div class="slot" id="a16"></div>
            <div class="slot" id="a17"></div>
            <div class="slot" id="a18"></div>
            <div class="slot" id="a19"></div>
            <div class="slot" id="a20"></div>
            <div class="slot" id="a21"></div>
            <div class="slot" id="a22"></div>
            <div class="slot" id="a23"></div>
            <div class="slot" id="a24"></div>
            <div class="slot" id="a25"></div>
            <div class="slot" id="a26"></div>
            <div class="slot" id="a27"></div>
            <div class="slot" id="a28"></div>
            <div class="slot" id="a29"></div>
            <div class="slot" id="a30"></div>
            <div class="slot" id="a31"></div>
            <div class="slot" id="a32"></div>
            <div class="slot" id="a33"></div>
            <div class="slot" id="a34"></div>
            <div class="slot" id="a35"></div>
            <div class="slot" id="a36"></div>
            <div class="slot" id="a37"></div>
            <div class="slot" id="a38"></div>
            <div class="slot" id="a39"></div>
            <div class="slot" id="a40"></div>
            <div class="slot" id="a41"></div>
            <div class="slot" id="a42"></div>
            <div class="slot" id="a43"></div>
            <div class="slot" id="a44"></div>
            <div class="slot" id="a45"></div>
            <div class="slot" id="a46"></div>
            <div class="slot" id="a47"></div>
            <div class="slot" id="a48"></div>
            <div class="slot" id="a49"></div>
            <div class="slot" id="a50"></div>
        </div>
    </div>
</body>
</html>

Answer 1

正如Satpal写道：不要使用相同的脚本标签，其中外部JS为代码加载。所以有效版本见下文：

<html>
<head>
    <link rel="icon" href="tf2.jpg"/>
    <link rel="stylesheet" href="interface.css"/>
    <title>TF2 Idler</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript">
        var random;
        var id;
        var items = [
            "holymackerel.png",
            "caber.jpg"
        ];
        function update() {
            if (String($('#a1').attr('style')).indexOf(this) == -1) {
                $('#a1').css("background-image", "url('" + items[id] + "')");
            }
            else if (String($('#a2').attr('style')).indexOf(this) == -1) {
                $('#a2').css("background-image", "url('" + items[id] + "')");
            }
        }
        setInterval(function () {
            random = 100 * (Math.random());
            if (random <= 10) {
                if (random < 5) {
                    id = 0;
                    update();
                }
                else if (random <= 10) {
                    id = 1;
                    update();
                }
            }
            else if (random > 10 && random <= 35) {
                //get crate
            }
        }, 5000);
    </script>
</head>
<body>
<div id="invent">
    <div id="page1">
        <div class="slot" id="a1"></div>
        <div class="slot" id="a2"></div>
        <div class="slot" id="a3"></div>
        <div class="slot" id="a4"></div>
        <div class="slot" id="a5"></div>
        <div class="slot" id="a6"></div>
        <div class="slot" id="a7"></div>
        <div class="slot" id="a8"></div>
        <div class="slot" id="a9"></div>
        <div class="slot" id="a10"></div>
        <div class="slot" id="a11"></div>
        <div class="slot" id="a12"></div>
        <div class="slot" id="a13"></div>
        <div class="slot" id="a14"></div>
        <div class="slot" id="a15"></div>
        <div class="slot" id="a16"></div>
        <div class="slot" id="a17"></div>
        <div class="slot" id="a18"></div>
        <div class="slot" id="a19"></div>
        <div class="slot" id="a20"></div>
        <div class="slot" id="a21"></div>
        <div class="slot" id="a22"></div>
        <div class="slot" id="a23"></div>
        <div class="slot" id="a24"></div>
        <div class="slot" id="a25"></div>
        <div class="slot" id="a26"></div>
        <div class="slot" id="a27"></div>
        <div class="slot" id="a28"></div>
        <div class="slot" id="a29"></div>
        <div class="slot" id="a30"></div>
        <div class="slot" id="a31"></div>
        <div class="slot" id="a32"></div>
        <div class="slot" id="a33"></div>
        <div class="slot" id="a34"></div>
        <div class="slot" id="a35"></div>
        <div class="slot" id="a36"></div>
        <div class="slot" id="a37"></div>
        <div class="slot" id="a38"></div>
        <div class="slot" id="a39"></div>
        <div class="slot" id="a40"></div>
        <div class="slot" id="a41"></div>
        <div class="slot" id="a42"></div>
        <div class="slot" id="a43"></div>
        <div class="slot" id="a44"></div>
        <div class="slot" id="a45"></div>
        <div class="slot" id="a46"></div>
        <div class="slot" id="a47"></div>
        <div class="slot" id="a48"></div>
        <div class="slot" id="a49"></div>
        <div class="slot" id="a50"></div>
    </div>
</div>
</body>
</html>

Jquery为div添加背景

1 个答案: