javascript - 单击后如何随机化图像?

标签 javascript jquery html css

我正在尝试创建一个随机 gif 生成器。设计非常简单,只需加载 gif/img,一旦用户点击/点击它就会随机化并从数组中拉出另一个随机图像。

现在我只想让图像在单击时随机化。

目前它只在页面刷新时随机化。

HTML

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/rand.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">

<head>
    <title>Gif Generator - Prototype</title>
</head>

<body> 

    <h1>Gif Generator - Prototype</h1>

    <section> 
        <p>This image is random</p>
        <a href="#" class="click">
            <script>
                getRandomImage()
            </script>
        </a>
    </section>



</body>

JS

var randomImage = new Array();

randomImage[0] = "images/100.jpg";
randomImage[1] = "images/200.jpg";
randomImage[2] = "images/300.jpg";
randomImage[3] = "images/400.jpg";


function getRandomImage() { 
var number = Math.floor(Math.random()*randomImage.length);
document.write('<img src="'+randomImage[number]+'" />');
}

最佳答案

根据顶部的 jQuery 引用,下面是建议的解决方案:

$(function() {
    $('a.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random()*randomImage.length);
        $(this).html('<img src="'+randomImage[number]+'" />');
    });
});

关于javascript - 单击后如何随机化图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27673899/

相关文章:

html - 您可以为多个 html 页面使用一次相同的 id 吗?

javascript - 如何使屏幕阅读器自动读取单元格内容?

javascript - 在未实现接口(interface) FormData 的对象上调用“追加”

javascript - 如何使计时器每秒滴答作响并在转发或倒带视频时使其跳转?

javascript - 显示基于文本字段值的 div?

javascript - Bootstrap : make expand/Collapsible table instead of div

html - 没有背景图片的全尺寸侧边栏

javascript - 如何循环获取从 config.json 文件获取的值的数量

javascript - javascript中的多线程

jquery - 第二次访问时显示 div