javascript - jquery为div添加背景

<分区>

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

我做的是模仿军团要塞2的掉落系统和制作，但我只是开始了掉落系统(给玩过的人)。

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

当用户获取它时，我希望没有背景图像的第一个 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>

最佳答案

正如 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>

关于javascript - jquery为div添加背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23241416/

上一篇：javascript - 如何在不禁用父屏幕的情况下使用 Colorbox 弹出窗口

下一篇：php - 嵌套 div 的重叠背景图像

相关文章：

javascript - 选择单选按钮时如何清除文本字段内的文本

Javascript nodeJs Postgres pg 单元测试

javascript - 提高函数速度

jquery - 用 jquery 在 </span> 之后添加 <br/>

javascript - 链接悬停时jQuery淡入图像

javascript - 加载一组照片时，如何为每个 imageID 制作唯一的评论按钮功能？

jquery - 如何使用 jquery 获取点击链接的 href？

javascript - JQuery 根据 <select> 中的值查找 <option> 标签

html - Chrome 和 Opera 占位符

php - 从表格中获取单元格值