Question

我试图让图像（#goon）移动并在点击时调整大小。代码效果很好，但它只在第一次单击时才有效。在第一次单击图像后，单击图像会执行操作。

以下是Javascript代码：

var random = Math.floor(Math.random()*  750 + 1)
var random2 = Math.floor(Math.random() * 200 + 10)

$(document).ready(function() {
    $("#goon").click(function move() {
        $("#goon").animate({left: random},0)
        $("#goon").animate({top: random},0)
        $("#goon").animate({height: random2},0)
        $("#goon").animate({width: random2},0)
    })
});

以下是HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Goon</title>
	<link rel='stylesheet' href='style.css' type = "text/css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div id = "goondiv">
	   <img src = "goon.jpg" id = "goon"/>
    </div>
</body>
</html>

如果这是一个愚蠢的问题，我真诚地道歉，但我仍然是网络开发的新手。

Answer 1

您的随机值仅在脚本开头计算一次。每次点击都会将您的元素设置为完全相同的值，效果仅显示第一次。

您应该在每次点击时创建新值。

$(document).ready(function() {
    $("#goon").click(function move() {

        var random = Math.floor(Math.random()*  750 + 1)
        var random2 = Math.floor(Math.random() * 200 + 10)

        $("#goon").animate({left: random},0)
        $("#goon").animate({top: random},0)
        $("#goon").animate({height: random2},0)
        $("#goon").animate({width: random2},0)
    })
});

Answer 2

<强> HTML

<div id = "goondiv">
    <img src = "goon.jpg" id = "goon"/>
</div>

<强> JS

var random = 750;
var random2 = 200;

$("#goon").click(function move() {
    random = Math.floor(Math.random()*  750 + 1)
    random2 = Math.floor(Math.random() * 200 + 10)
    $("#goon").animate({left: random},0)
    $("#goon").animate({top: random},0)
    $("#goon").animate({height: random2},0)
    $("#goon").animate({width: random2},0)
});

工作示例

DEMO

尝试在单击时移动图像，但.click甚至仅在第一次单击时触发

2 个答案: