Question

我希望能够循环显示几个不同的标签，并根据是否检查单选按钮隐藏其内容。这是我提出的解决方案，但我在控制台中一直收到错误。

var hazardOptions = $(".js-hazardous-option");
var hazard = $("input[name=Hazardous]");
for (var i = 0, len = hazard.length; i < len; i++) {
    if (hazard[i].id === "HazardousYes" && hazard[i].checked) {
        for (var ii = 0, length = hazardOptions.length; ii < length; ii++) {
            hazardOptions[ii].show();
        }
    } else if (hazard[i].id === "HazardousNo" && hazard[i].checked) {
        for (var iii = 0, leng = hazardOptions.length; iii < leng; iii++) {
            hazardOptions[iii].hide();
        }
    }
}

我得到的错误是：

hide（）不是函数

我不确定自己错过了什么，我已经尝试过网上查找类似的问题，但没有运气。我非常确定问题出在此处：hazardOptions[iii].hide();但不确定原因和/或如何解决问题。

Answer 1

当你有一个来自JQuery选择器的对象列表时，如果你试图通过索引访问它们，你实际上会得到DOM元素而不是JQuery对象。它确实令人困惑，但it is in the documentation。

您实际需要做的是将其重新转换为JQuery对象：

$(hazardOptions[iii]).hide();

或者你可以使用eq() function与做提供JQuery对象广告，因此仍然具有hide()功能：

hazardOptions.eq(iii).hide();

Answer 2

很可能你需要用$

包装它

$(hazardOptions[ii]).hide()

Answer 3

正如您目前所拥有的那样，如果hazard.id === "HazardousYes"，您显示所有的hazardOptions，如果是"HazardousNo"，则表示您正在隐藏所有这些。

您可以在jQuery集合上调用.show()和.hide()，然后将其应用于集合中的所有元素。下面的代码将复制原始代码的逻辑，但是，hazardOptions最终显示/隐藏状态将仅由检查的最后一个危险确定，其id等于＆＃34;危险情况＆＃34;和＆＃34;危险的没有＆＃34;。这可能是你想要的，但我想它不是。

＆＃13;

var hazardOptions = $(".js-hazardous-option");
var hazards = $("input[name=Hazardous]");
hazards.each(function (index, hazard) {
  if (hazard.checked) {
    if (hazard.id === "HazardousYes") {
      hazardOptions.show();
    } else if (hazard.id === "HazardousNo") {
      hazardOptions.hide();
    }
  }
}

＆＃13;

修改 - 想想看，如果你没有重复身份证的元素，你可以让它变得非常简单：

hazardOptions.show($("#HazardousYes").is(":checked")); 
hazardOptions.hide($("#HazardousNo").is(":checked"));

从循环执行时，.hide（）不是函数错误

3 个答案: