如何在javascript中创建职位数组？

Question

我对Javascript/Jquery非常陌生，我并不真正理解它。我目前正在做一个交互式的测试，你需要点击一个特定的位置来继续下一个问题。我已经找出了客户x的位置。

我试图用一个if然后语句来创建测试，但我不知道如何改变位置以继续下一个问题。我猜最好的方法是创建位置数组。

我很感激我能得到的任何见解。

联署材料：

​

// 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");

 }

}

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

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

您可以通过比较“计数”和“位置”数组的长度来检查用户是否获得了所有这些信息。