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，並且通過搜索找不到任何可行的替代方案。

來源

2016-09-26 justiceorjustus

你試圖實現什麼？ –

再次檢查這一行：'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')); 
}

來源

2016-09-26 13:39:12 yomisimie

完美！你先做到了。這絕對有助於我從邏輯上理解這裏發生了什麼事情！ – 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')); 
}

來源

2016-09-26 13:39:25 eisbehr

首先改變$('#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(); 
    } 
     } 
}

來源

2016-09-26 13:42:47

JQuery單選按鈕單擊未捕獲投擲TypeError：無法讀取未定義的屬性'indexOf'

回答

相關問題