是否可以让多个脚本调用同一个脚本？

Question

我有四个 div，我希望它们显示随机图像。我从 SO 那里得到了这段代码，它可以工作：

<script type="text/javascript">
        function get_image(div_id){
            var imgCount = 3;
            var dir = 'images/';
            var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
            var images = new Array
                images[1] = "1.jpg",
                images[2] = "2.jpg",
                images[3] = "3.jpg",
            document.getElementById(div_id).style.backgroundImage = "url(" + dir + images[randomCount] + ")";
            console.log("div_id = " + div_id)
        }
    </script>

像这样从 div 调用它：

<div class="image_holder" id="left_top">
                <script id="lt_innerscript">
                    var div_id = document.getElementById("lt_innerscript").parentElement.id;
                    var myVar = setInterval(function() { get_image(div_id); }, 800);
                </script>   
            </div>

问题是，只有最后一个显示图像，其他所有都是空白的。这可能吗，我做错了什么？

有一些 CSS 来设置 div 的样式，它们存在于 2 个独立的 div 中，id 分别为“left”和“right”。

#left{
    float: left;
    background: blue;
    width: 300px;
    height: 100%;
    color: #005CB9;
}

和

.image_holder {
    position: relative;
    width: 300px;
    height: 256px;
}

Answer 1

对于遇到这种情况的其他人，我是这样解决的……

这是来自 SO 的代码，根据我的需要稍作修改（图像编号为 1.jpg、2.jpg 等）：

function show_images(the_div){
    console.log(the_div)
    var imgCount = 19;
    var dir = 'images/';
    var imagenum = Math.round(Math.random() * (imgCount - 1)) + 1;
    var theimage = imagenum.toString() + ".jpg"
    document.getElementById(the_div.id).style.backgroundImage = "url(" + dir + theimage + ")";

}

因此，我没有在每个 div 元素中使用脚本来调用它，而是使用了这个，它从每个侧面板获取 div：

    function get_divs(){
        var left = document.getElementById("left");
        var right = document.getElementById("right");

        var l_divs = left.getElementsByTagName("div");
        var r_divs = right.getElementsByTagName("div");

        return [l_divs, r_divs]
    }

这是由以下代码调用的，它接受 div，在循环中生成 1 到 6 之间的三个随机数。小于 3 的数字用于左侧，大于 4 的数字用于右侧，但由于每侧只有 3 个 div，如果数字 > 4，则减去 3。

然后它使用上面的 show_images() 代码设置 div 图像。

function update_divs(){
    divs = get_divs()
    l_divs = divs[0]
    r_divs = divs[1]

    for(var i=0; i<4; i++){
        rnd = Math.floor((Math.random() * 6));
        if (rnd <= 2){
            show_images(l_divs[rnd])
        }else{
            rnd -= 3;
            show_images(r_divs[rnd])
     }
}

}

然后我只是在页面末尾添加了：

<script>    
    setInterval(update_divs, 1600)
</script>