如何在javascript中创建位置数组?

Question

我对Javascript/Jquery很陌生，我不太明白。我目前正在进行交互式测验，您需要单击特定位置才能转到下一个问题。我已经通过找到客户端-x来找出位置。

我尝试使用 if then 语句创建测验，但我不确定如何更改位置以继续下一个问题。我猜最好的方法是创建位置数组。

我将不胜感激我能得到的任何见解。

.JS：

// var positions = [[510, 650, 680, 768], [700, 930, 630, 768], [580, 630, 260, 320]];
function showCoords(evt) {
var x = event.clientX;
var y = event.clientY;
console.log("X coords: " + x + ", Y coords: " + y);
var leftIndent = $("#pages")[0].offsetParent.offsetLeft;
if ((evt.clientX > (510 + leftIndent) && evt.offsetX < (650 + leftIndent)) && (evt.clientY > 680 && evt.clientY < 768)) {
console.log("answer is correct");
$(".question > h3").text("Well Done! You found it.").delay("slow");
$(".next-1").addClass("show");
$('.next-1').click(function() {
$("#cam-1").addClass("hide");
$("#cam-2").addClass("show");
$(".question > h3").text("Find The Camouflaged Animal In This Biome").delay("slow");
});
} else {
console.log("answer is wrong");
$(".question  > h3").text("Sorry, that's not it. Try again.").delay("slow");
}
}

<div id="page-camouflage" onclick="showCoords(event)" class="current">
<img id="bubble" alt="speech" src="images/bubble.svg">
<img class="cloud" alt="clouds floating in the sky" src="images/cloud.png">
<div class="question">
<h3> Find The Camouflaged Animal In This Biome </h3>
</div>
<div class="help">
<img alt="help button" src="images/help.svg">
<h2 id="hint">
Frogs like chilling by the pond.
</h2>
</div>
<div id="cam-1">
<div class="hidden">
<img id="frog" alt="frog" src="images/cam/frog.svg">
</div>
<div>
<img id="leaf" alt="leaf" src="images/cam/cam1.svg">
</div>
<audio id="croak">
						<source src="audio/frog.mp3" type="audio/mpeg">
								Your browser does not support the audio element
						</audio>
<div>
<img class="next-1" alt="next button" src="images/next.svg">
</div>
</div>
<div id="cam-2">
<div>
<img id="lion2" alt="lion" src="images/cam/lion.svg">
</div>
<div>
<img id="grass" alt="leaf" src="images/cam/grass.svg">
</div>
<div>
<img class="next-2" alt="next button" src="images/next.svg">
</div>
</div>
<div id="cam-3">
<div>
<img id="pigeon" alt="pigeon" src="images/cam/pig.svg">
</div>
<div>
<img id="tree" alt="tree" src="images/cam/tree.svg">
</div>
<div>
<img id="trash" alt="trash" src="images/cam/trash.svg">
</div>
</div>
</div>

Answer 1

你有正确的想法，你只需要把它推得更远一点：

var positions = [[510, 650, 680, 768], [700, 930, 630, 768], [580, 630, 260, 320]];
var count = 0;
function showCoords(evt) {
var x = event.clientX;
var y = event.clientY;
console.log("X coords: " + x + ", Y coords: " + y);
var leftIndent = $("#pages")[0].offsetParent.offsetLeft;
if ((evt.clientX > (positions[count][0] + leftIndent) && evt.offsetX < (positions[count][1] + leftIndent)) && (evt.clientY > positions[count][2] && evt.clientY < positions[count][3])) {
console.log("answer is correct");
count++;
$(".question > h3").text("Well Done! You found it.").delay("slow");
$(".next-1").addClass("show");
$('.next-1').click(function() {
$("#cam-1").addClass("hide");
$("#cam-2").addClass("show");
$(".question > h3").text("Find The Camouflaged Animal In This Biome").delay("slow");
});
} else {
console.log("answer is wrong");
$(".question  > h3").text("Sorry, that's not it. Try again.").delay("slow");
}
}

在这里，变量计数跟踪所有好的答案。

在您的if中，我用位置数组中的等效项替换了所有内容。

您可以通过将计数与仓位数组的长度进行比较来检查用户是否全部获得了它们。