Question

我试图用JavaScript和HTML制作一个简单的flashcard。我努力减少我使用的代码量（减少冗余）

我尝试使用4个输入

创建一个函数

function displaySet(xMin, xMax, cardSelect, title)

此功能旨在放在另一个功能中。如下：

$("#face_parts_basic").click(function(){
    displaySet(1,11,body_parts, "Basic Parts of a Face");
});

ID为＆＃34; face_parts_basic＆＃34;的DOM元素是一个可点击的div，然后取消隐藏flashcard占位符div。它意味着使用数组中正确位置的正确数据填充它（定义为cardSelect）。

该功能可以加载数据数组中的第一个项目。然而，当我尝试使用前进和后退按钮循环时，它不起作用。最初我用每个.click函数硬编码了它需要循环的值。它的正向和反向功能都很好。

我相信我遇到的问题是iMin＆amp; iMax变量不向任何值提供前向/后向函数。因此，为什么它不会循环。

澄清： xMin和xMax用于提供数组中数据的位置。 iMin＆amp; iMax变量被赋值为xMin＆amp; xMax值。然后，这些变量将被#btn_fwd＆amp; #btn_bck .click函数用于设置在我的数据数组中循环的参数。这是我目前的代码。下面我将展示我最初是如何编写每个函数的。

var i = 0;
var iMin;
var iMax;
var card;
var cardArray;

function name() {
  return document.getElementById("name");
}

function plural() {
  return document.getElementById("plural");
}

function type() {
  return document.getElementById("type");
}

function imgLoc() {
  return document.getElementById("imgLoc");
}

function bodyBasic() {
  return document.getElementById("body_basic");
}

function clearCont() {
  $("#card").html("");
  $("#name").html("");
  $("#plural").html("");
  $("#type").html("");
  $("#imgLoc").attr("src", "");
};

$(document).ready(function() {

  $("#popup-content").hide();

  function openContent() {
    $("#popup-content").show("slow", function() {});
  }
  $("#close-content").click(function() {
    clearCont();
    $("#popup-content").hide("slow", function() {});
  });
  //Start of flashcard sets for clicking

  function displaySet(xMin, xMax, cardSelect, title) {
    // clearCont();
    openContent();
    i = xMin;
    iMin = xMin;
    iMax = xMax;
    cardArray = cardSelect;
    $("#card").html(title);
    name().innerHTML = cardArray[i].name;
    plural().innerHTML = "<h4 style=\"display:inline\">Plural: </h4>" + cardArray[i].plural;
    type().innerHTML = cardArray[i].type;
    imgLoc().setAttribute("src", cardArray[i].imgLoc);
  };
  $("#face_parts_basic").click(function() {
    displaySet(1, 11, body_parts, "Basic Parts of a Face");
  });

  $("#body_basic").click(function() {
    displaySet(12, 25, body_parts, "Basic Parts of the Human Body");
  });
  //Flashcard navigation functionality
  $("#btn_fwd").click(function() {

    $("#card").html(title);
    name().innerHTML = cardArray[i].name;
    plural().innerHTML = cardArray[i].plural;
    type().innerHTML = cardArray[i].type;
    imgLoc().setAttribute("src", cardArray[i].imgLoc);

    if (i >= iMax) {
      i = iMin;
    } else {
      i++;
    }
  });

  $("#btn_bck").click(function() {
    $("#card").html(title);
    name().innerHTML = cardArray[i].name;
    plural().innerHTML = cardArray[i].plural;
    type().innerHTML = cardArray[i].type;
    imgLoc().setAttribute("src", cardArray[i].imgLoc);

    if (i <= iMin) {
      i = iMax;
    } else {
      i--;
    }
  });
});

我最初是如何编写每个函数的（它在我看来运行得很好，冗余编码太多了：

$("#face_parts_basic").click(function(){
    openContent();
    i = 1;
    iMin = 1;
    iMax = 11;

    $("#card").html("basic parts of a face");
    name().innerHTML = body_parts[i].name;
    plural().innerHTML = "<h4 style=\"display:inline\">Plural: </h4>"+body_parts[i].plural;
    type().innerHTML = body_parts[i].type;
    imgLoc().setAttribute("src",body_parts[i].imgLoc);
});

感谢您提供的任何帮助。

Answer 1

取出

$("#card").html(title);

在#btn_fwd和#btn_bck点击处理程序中。当您浏览部件时，无需更改标题，这是在displaySet()选择类别时完成的。

如果你确实需要这个，你可以使用另一个全局变量，就像你对cardArray一样。

在javascript

1 个答案: