Question

出现问题的页面：http://robinbz216.216.axc.nl/kinderen.html

我在点击时打开一个模式，并为您可以单击的11个div中的每个div获取不同的内容。我做了向左和向右箭头，因此用户不必关闭模式并单击下一个div即可查看下一个内容。单击div时，jquery会在所有11个项目的节点列表中查找它的位置，并将其放在变量（名为indexVar）中，并从11个内容数组中获取正确的内容。如果单击左箭头，indexVar将获得-1，然后再次使用内容数组检查该数字，并且模式中将显示以前的div内容。

第一次单击div时，一切正常。但是，当您关闭模态并再次单击div时，最后一个indexVar并没有消失，并且产生了相同单击功能的另一个实例，因此它将下一个上一个加倍以及接下来使用箭头按钮完成的点击。

我想我的函数结构非常糟糕，我不知道如何解决它，因此，再次单击11个div之一，它就会重新开始，而没有上一次模态使用中的函数。

$(".kindDiv").click(function() {
  if (!($("#singleModal2").hasClass("zichtbaar"))) {
    $("#singleModal2").addClass("zichtbaar");


    // Returns a NodeList
    var kindDivss = document.getElementsByClassName("kindDiv");

    var indexVar = $(".kindDiv").index(this);

    var modalLength = modalArray.length;

    var modalLengthMin = modalLength;
    var modalLengthMini = modalLength;

    modalLengthMini = modalLengthMini - 1;
    modalLengthMin = modalLengthMin - 2;


    for (i = 0; i < modalLength; i++) {
      var firstWord = modalArray[i].replace(/ .*/, '');
      arrayVoornaam.push(firstWord);

      if (i == indexVar) {
        //append content in modal
        $("#singleModal2 h4").html(arrayVoornaam[i]);
        $("#singleModal2 p").html(modalArray[i]);
        $("#singleModal2 img").attr("src", imageArray[i]);
      }
    }

    //Hide buttons when first or last of 11 divs is opened
    if (indexVar == modalLengthMini) {
      $(".arrowRight").addClass("invisible");

    }
    if (indexVar == 0) {
      $(".arrowLeft").addClass("invisible");

    }

    //Left arrow click
    $(".arrowLeft").click(function() {
      if (indexVar == 1) {
        $(".arrowLeft").addClass("invisible");

      }
      if (indexVar !== modalLengthMin) {
        $(".arrowRight").removeClass("invisible")

      }
      indexVar--;

      $("#singleModal2 h4").html(arrayVoornaam[indexVar]);
      $("#singleModal2 p").html(modalArray[indexVar]);
      $("#singleModal2 img").attr("src", imageArray[indexVar]);

    });


    //Right arrow click
    $(".arrowRight").click(function() {
      if (!indexVar == 1) {
        $(".arrowLeft").removeClass("invisible");
      }
      if (indexVar == modalLengthMin) {
        $(".arrowRight").addClass("invisible");

      }
      indexVar++;

      $("#singleModal2 h4").html(arrayVoornaam[indexVar]);
      $("#singleModal2 p").html(modalArray[indexVar]);
      $("#singleModal2 img").attr("src", imageArray[indexVar]);
    });




    //close modal
    $(".close").click(function() {
      $("#singleModal2").removeClass("zichtbaar");
      arrayVoornaam = [];

      $(".arrowLeft").removeClass("invisible");
      $(".arrowRight").removeClass("invisible");
    });

  }
});

从函数返回并在单击时重置其变量

0 个答案: