JQuery单选按钮单击未捕获投掷TypeError：无法读取未定义的属性'indexOf'

问题描述：

我有一个表单，当你点击/检查一个特定的单选按钮时，它显示或隐藏一些元素。此功能还需要在页面加载时运行，以防MVC验证返回后发生错误。问题是我在页面加载时得到了TypeError: Cannot read property 'indexOf' of undefined，虽然代码确实有效，但它会在脚本部分中打破它下面的所有代码。我得出的结论是，我没有检查在这里选择了哪个单选按钮：if ($element.attr('class').indexOf('update-type-check-current') !== -1)。JQuery单选按钮单击未捕获投掷TypeError：无法读取未定义的属性'indexOf'

JQuery的：

$(document).ready(function() { 
    $('#CurrentEmployeeRB input[type="radio"]').click(function() { 
     clickFunc($(this)); 
    }); 
    clickFunc($('#CurrentEmployeeRB input[type=radio]:checked')); 
}); 

function clickFunc($element) { 
    var currentEmployee = $('.current-employee'); 
    if ($element.attr('class').indexOf('update-type-check-current') !== -1) { 
     currentEmployee.show(); 
    } 
    else { 
     currentEmployee.hide(); 
    } 
}

HTML：

<div class="form-group"> 
    <label class="col-md-2 control-label" for="UpdateType">New or Current?</label> 
    <div class="col-md-10" id="CurrentEmployeeRB"> 
     <label class="radio-inline"> 
      <input class="btn btn-primary update-type-check-new" data-val="true" data-val-required="Please select whether the employee is new or current." id="UpdateType" name="UpdateType" type="radio" value="New"> New 
     </label> 
     <br> 
     <label class="radio-inline"> 
      <input class="btn btn-secondary update-type-check-current" id="UpdateType" name="UpdateType" type="radio" value="Current"> Current 
     </label> 
     <br> 
     <span class="field-validation-valid text-danger" data-valmsg-for="UpdateType" data-valmsg-replace="true"></span> 
    </div> 
</div>

剃刀：

<div class="form-group"> 
    @Html.LabelFor(m => m.UpdateType, new { @class = "col-md-2 control-label" }) 
    <div class="col-md-10" id="CurrentEmployeeRB"> 
     <label class="radio-inline"> 
      @Html.RadioButtonFor(m => m.UpdateType, "New", new { @class = "btn btn-primary update-type-check-new" }) New 
     </label> 
     <br /> 
     <label class="radio-inline"> 
      @Html.RadioButtonFor(m => m.UpdateType, "Current", new { @class = "btn btn-secondary update-type-check-current" }) Current 
     </label> 
     <br /> 
     @Html.ValidationMessageFor(m => m.UpdateType, "", new { @class = "text-danger" }) 
    </div> 
</div>

是否有不同的方式，我应该这样做呢？我刚刚开始学习JQuery，并且通过搜索找不到任何可行的替代方案。

你试图实现什么？ –

再次检查这一行：'clickFunc（$（'＃CurrentEmployeeRB input [type = radio]：checked'））'。该行需要检查一个单选按钮。但是没有默认选中的单选按钮。 –

您的HTML –

答

你应该准备好

clickFunc($('#CurrentEmployeeRB input[type=radio]:checked'));

改变符合

if($('#CurrentEmployeeRB input[type=radio]:checked').length >= 1) { 
    clickFunc($('#CurrentEmployeeRB input[type=radio]:checked')); 
}

完美！你先做到了。这绝对有助于我从逻辑上理解这里发生了什么事情！ – justiceorjustus

也像@eisbehr建议你应该检查hasClass，在你的情况下效果更好。 – yomisimie

坏主意。 OP说他默认不需要检查单选按钮。这意味着，if语句中的条件永远不会成立。此外，它将在页面加载后检查一次，而不是每次检查单选按钮时检查。 –

答

不要indexOf搜索，使用hasClass。如果选择器未返回任何元素，则代码将失败。

function clickFunc($element) { 
    var currentEmployee = $('.current-employee'); 

    if($element.hasClass('update-type-check-current')) { 
     currentEmployee.show(); 
    } 
    else { 
     currentEmployee.hide(); 
    } 
}

只是一个提示：您可以使用toggle为同一任务太：

function clickFunc($element) { 
    $('.current-employee').toggle($element.hasClass('update-type-check-current')); 
}

答

首先改变$('#CurrentEmployeeRB input[type=radio]:checked')到$('#CurrentEmployeeRB input[type="radio"]:checked')，最初因为文件加载后没有无线电按钮被选中$element不包含任何因此你会得到那个错误，所以把你的逻辑放在if statement内

if($element.length != 0) {}

JS：

$(document).ready(function() { 
    $('#CurrentEmployeeRB input[type="radio"]').click(function() { 
     clickFunc($(this)); 
    }); 
    clickFunc($('#CurrentEmployeeRB input[type="radio"]:checked')); 
}); 

function clickFunc($element) { 
    if($element.length != 0) { 
    var currentEmployee = $('.current-employee'); 
    console.log($element); 
    if ($element.attr('class').indexOf('update-type-check-current') !== -1) { 
     currentEmployee.show(); 
    } 
    else { 
     currentEmployee.hide(); 
    } 
     } 
}

JQuery单选按钮单击未捕获投掷TypeError：无法读取未定义的属性'indexOf'

相关推荐