【发布时间】：2020-06-22 09:54:05
【问题描述】：
我正在尝试根据一个变量更改正方形的位置（占位符图像），我想在单击左右按钮时进行更改。我不确定我做错了什么，即使是显示变量是否正在更改的调试按钮也不起作用。下面的代码（如果确实需要 CSS，Idk 但我还是添加了它）。
编辑：这是代码https://codepen.io/linelessmail/pen/yLNpGve的链接
HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left" class="button" style="font-size :40px;height:100px;width:300px">Left</button>
<button id="right" class="button" style="font-size : 40px;height:100px;width:300px">Right</button>
<button onClick="test()">DEBUG</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Blended_colour_wheel.svg/300px-Blended_colour_wheel.svg.png" alt="Wheel" width="800"height="800" id="wheel">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/1200px-Square_-_black_simple.svg.png" alt="square" width="200"height="200" id="square">
CSS：
#right {
position:absolute;
top: 60px;
left: 1000px;
}
#left {
position:absolute;
top: 240px;
left: 1000px;
}
#wheel {
position:absolute;
top: 50px;
left: 50px;
transform-origin: centre;
}
#square {
position:absolute;
top: 400px;
left: 1000px;
transform-origin: centre;
}
Javascript：
$(document).ready(function() {
var deg = 0;
var position = 1;
$(".button").on("click", function() {
if ($(this).is("#left")) {
deg = deg - 32.7272727273;
var position = position - 1;
if (position == 1) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '400px';
}
if (position == 2) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '400px';
}
if (position == 3) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '600px';
}
if (position == 4) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '600px';
}
if (position == 5) {
var position = 1
}
} else {
deg = deg + 32.7272727273;
var position = position + 1;
if (position == 1) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '400px';
}
if (position == 2) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '400px';
}
if (position == 3) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '600px';
}
if (position == 4) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '600px';
}
if (position == 5) {
var position = 1
}
}
$("#wheel").css({
"-webkit-transform": "rotate(" + deg + "deg)",
"-moz-transform": "rotate(" + deg + "deg)",
"-ms-animation:": "rotate(" + deg + "deg)",
"-o-animation": "rotate(" + deg + "deg)",
transform: "rotate(" + deg + "deg)"
});
function test(click){
alert("Position variable is " + position);
}
});
});
【问题讨论】：
-
可以分享演示吗？
-
@vadivela 哎呀，就在这里！ codepen.io/linelessmail/pen/yLNpGve
-
@linelessmail 你调试过 Javascript 代码并找出变量位置值是什么？根据您的声明，我假设它的价值为“NaN”。此外，您已将其值设置为 1，然后从 1 中减去结果为“0”，因此没有任何 if 条件被击中，因此当您按下左键时方块不会向左移动。您可以尝试更正您的 Javascript 代码。
-
@TheGaME 我不知道如何在没有按钮的情况下查看变量（但它不起作用），但感谢您在左按钮处指出这一点，我完全忽略了这一点！可以像我用 5 的上限那样用“if (position == 0) { var position = 4}”来解决吗？
-
@linelessmail 如果您使用 Chrome 浏览器进行测试，请查看此页面以了解如何使用开发人员工具调试 Javascript。 developers.google.com/web/tools/chrome-devtools
标签： javascript jquery html css image