在javascript中访问函数外部函数中声明的变量

我正在尝试用JavaScript和HTML制作一个简单的抽认卡集。在我努力减少代码使用量的过程中（减少冗余）

我试着做一个有4个输入的函数

function displaySet(xMin, xMax, cardSelect, title)

此函数将放置在另一个函数中。详情如下:

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

id为“face\u parts\u basic”的DOM元素是一个可单击的div，然后取消隐藏flashcard占位符div。它用于从数组中的适当位置（定义为cardSelect）向其填充正确的数据

该函数在加载数据数组中的第一个项时起作用。然而，当我尝试用前进和后退按钮循环时，它不起作用。最初，我对每个函数都进行了硬编码。单击函数，并使用它需要循环使用的值。它与我的前进和后退功能配合得很好

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--;
    }
  });
});

我认为我遇到的问题是iMin和iMax变量没有为向前/向后函数提供任何值。因此，它不会循环通过

澄清： xMin和xMax旨在提供数组中数据的位置。iMin和iMax变量被分配值xMin和xMax。然后这些变量将由#btn_fwd&#btn_bck使用。单击函数可设置在我的数据数组中循环的参数。这是我当前的代码。下面我将展示我最初是如何编写每个函数的

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--;
    }
  });
});

var i=0；
var-iMin；
var-iMax；
var卡；
var阵列；
函数名（）{
返回文档.getElementById（“名称”）；
}
函数复数（）{
返回文件.getElementById（“复数”）；
}
函数类型（）{
返回文档.getElementById（“类型”）；
}
函数imgLoc（）{
返回文档.getElementById（“imgLoc”）；
}
函数bodyBasic（）{
返回文档.getElementById（“body_basic”）；
}
函数clearCont（）{
$（“#卡片”）.html（“”）；
$（“#名称”）.html（“”）；
$（“#复数”）.html（“”）；
$（“#type”）.html（“”）；
$（“#imgLoc”）.attr（“src”，“src”）；
};
$（文档）.ready（函数（）{
$（“#弹出内容”）.hide（）；
函数openContent（）{
$（“#弹出内容”）.show（“慢”，function（）{}）；
}
$（“#关闭内容”）。单击（函数（）{
clearCont（）；
$（“#弹出内容”）.hide（“慢”，function（）{}）；
});
//启动用于单击的闪存卡集
功能显示集（xMin、xMax、cardSelect、title）{
//clearCont（）；
openContent（）；
i=xMin；
iMin=xMin；
iMax=xMax；
cardArray=cardSelect；
$（“#卡片”）.html（标题）；
name（）.innerHTML=cardArray[i].name；
复数形式。innerHTML=“复数形式：”+cardArray[i]。复数形式；
type（）.innerHTML=cardArray[i]。类型；
imgLoc（）.setAttribute（“src”，cardArray[i].imgLoc）；
};
$（“#面#部件_基本”）。单击（函数（）{
显示集（1，11，身体部位，“面部基本部位”）；
});
$（“#body_basic”）。单击（函数（）{
显示集（12、25，身体部位，“人体基本部位”）；
});
//闪存卡导航功能
$（“#btn_fwd”）。单击（函数（）{
$（“#卡片”）.html（标题）；
name（）.innerHTML=cardArray[i].name；
复数形式（）.innerHTML=cardArray[i]。复数形式；
type（）.innerHTML=cardArray[i]。类型；
imgLoc（）.setAttribute（“src”，cardArray[i].imgLoc）；
如果（i>=iMax）{
i=亚胺；
}否则{
i++；
}
});
$（“#btn_bck”）。单击（函数（）{
$（“#卡片”）.html（标题）；
name（）.innerHTML=cardArray[i].name；
复数形式（）.innerHTML=cardArray[i]。复数形式；
type（）.innerHTML=cardArray[i]。类型；
imgLoc（）.setAttribute（“src”，cardArray[i].imgLoc）；
如果（i取出

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

在
#btn_fwd
和
#btn_bck
中，单击处理程序。在零件导航时无需更改标题，这是通过选择类别时的
displaySet（）
完成的

如果你确实需要这个，你会使用另一个全局变量，就像你对
cardArray
所做的一样，其中一些是jQuery。希望这不会让人混淆。为什么常规JS和jQuery混合在一起会让人混淆呢？当你可以使用
$（“#name”）的时候，为什么你需要像
name
这样的函数呢
？您的原始代码没有分配给
cardArray
。除此之外，我看不出使用该函数有什么区别。您能否制作一个可执行代码段来演示问题？因为在我看来它应该可以工作。只有前两组代码是我当前的javascript尝试使用的。