jQuery-count（）函數無法正常工作
[英]jQuery - count() function not working correctly
問題描述
function count() { $("input:radio")[1].html = alert("We're from the same site"); $("input:radio")[0][2][3].html = alert("We are not from the same site"); }
<html> <head> <title>jQuery Script</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" language="javascript"> </script> </head> <body> <h1>Select one campus</h1> <form> <input id="Belfast" type="radio"> Belfast <input id="Jordanstown" type="radio"> Jordanstown <input id="Magee" type="radio"> Magee <input id="Coleraine" type="radio"> Coleraine <br> <br> <input type = "button" value="Count" onclick="count()"> </form> <input type="button" value="Reload page" onclick="reloadPage()"> </body> </html>
有人可以幫我解決這段代碼嗎？ 目前，我正在學習jQuery，並嘗試創建jQuery腳本來檢查訪問者是否與我在同一大學校園內。 我正在使用以下代碼：
當我在屏幕上選擇第二個選項時，它可以按預期工作，但對於其他任何選項，似乎都給了我完全相同的警告框，如下所示：
我認為錯誤位於我的count（）函數中，但是我看不出問題所在：
function count() {
$("input:radio")[1].html = alert("We're from the same site");
$("input:radio")[0][2][3].html = alert("We are not from the same site");
}
5 個解決方案
解決方案1
2 2018-03-02 15:35:24
<html> <head> <title>jQuery Script</title> </head> <body> <h1>Select one campus</h1> <form> <input id="Belfast" value="Belfast" name="campus" type="radio"> Belfast <input id="Jordanstown" value="Jordanstown" name="campus" type="radio"> Jordanstown <input id="Magee" value="Magee" name="campus" type="radio"> Magee <input id="Coleraine" value="Coleraine" name="campus" type="radio"> Coleraine <br> <br> <input type = "button" value="Count" id="count"> </form> <input type="button" value="Reload page" id="reload"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $('#count').click(function() { var campus = $("input[name='campus']:checked"); if(campus.length > 0){ if(campus.val()=="Belfast") alert('same campus'); else alert('different campus') } }); $('#reload').click(function() { location.reload(); }); </script> </body> </html>
解決方案2
1 已采納 2018-03-02 15:43:05
我認為您的預期目標是“如果選擇了＃1單選按鈕，提醒'同一站點'消息，並且如果選擇了＃0，＃2或＃3單選按鈕，則顯示“不同網站的消息”。
您的代碼有幾個錯誤，但我將嘗試解決最基本的誤解：
鏈括號表示法會根據前一次訪問的結果進行屬性訪問。
foo[0][2][3]說“從foo訪問屬性0，然后從先前訪問的結果訪問屬性2（從foo0開始），然后從先前訪問的結果訪問屬性3（從結果的2訪問）在foo上為0）。等效於result1 = foo[0]; result2 = result1[2]; result3 = result2[3];這不是遠程你究竟想要，我想-你似乎期望，你會選擇
0，2和3都從最左邊的表達。您要在此處檢查的是是否選擇了特定的單選按鈕。
.html當然不是這樣做的方法，它不是DOM中具有任何意義的屬性。 您可以通過$("input:radio")[1].selected檢查DOMselected屬性。您需要一個條件 ：“ 如果選擇了按鈕＃1，則...”可以使用
if構造來做到這一點：if($("input:radio")[1].selected) { alert("same site"); }然后，如果其他條件正確，則可以使用
else運行代碼：if($("input:radio")[1].selected) { alert("same site"); } else { alert("different site"); }
jQuery-idomatic的方法更多（並且不那么脆弱，如果稍后更改選項的順序）將是編寫一個jQuery選擇器，以使用:checked選擇器查找當前選項，然后比較該元素的id ：
if($("input:radio:checked").attr("id") === "Jordanstown") {
...
}
解決方案3
0 2018-03-02 15:43:01
function count() { var selectedCampus = $("input[name=campus]:checked").val(); if(typeof selectedCampus === "undefined") { alert("Select a campus"); return; } var myCampus = "jordanstown"; if(selectedCampus === myCampus){ alert("We're from the same site"); } else { alert("We are not from the same site"); } }
<html> <head> <title>jQuery Script</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" language="javascript"> </script> </head> <body> <h1>Select one campus</h1> <form> <input id="Belfast" name="campus" value="belfast" type="radio"> Belfast <input id="Jordanstown" name="campus" value="jordanstown" type="radio"> Jordanstown <input id="Magee" name="campus" value="magee" type="radio"> Magee <input id="Coleraine" name="campus" value="coleraine" type="radio"> Coleraine <br> <br> <input type = "button" value="Count" onclick="count()"> </form> <input type="button" value="Reload page" onclick="reloadPage()"> </body> </html>
解決方案4
0 2018-03-02 15:43:47
您需要添加一個名稱屬性，一次只能選擇其中一個，例如單選按鈕組。 檢查下面的代碼
function count(){ $("input[type=radio]:checked").each(function(){ if($(this).prop('id') === "Belfast"){ alert("We're from the same site"); } else{ alert("We are not from the same site"); } }); } function reloadPage(){ location.reload(); }
<html> <head> <title>jQuery Script</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <h1>Select one campus</h1> <form> <input id="Belfast" name="uni" type="radio"> Belfast <input id="Jordanstown" name="uni" type="radio"> Jordanstown <input id="Magee" name="uni" type="radio"> Magee <input id="Coleraine" name="uni" type="radio"> Coleraine <br> <br> <input type = "button" value="Count" onclick="count()"> </form> <input type="button" value="Reload page" onclick="reloadPage()"> </body> </html>
解決方案5
0 2018-03-02 15:45:02
試試這個吧。
JS
// on click of input with value of Count
$("input[value='Count']").click(function() {
// if school is yours
if ($('#Jordanstown').prop('checked')) {
alert("We're from the same site");
// else, all other schools are not yours
} else {
alert('We are not from the same site');
}
})
// i didnt play with this
function reloadPage() {
location.reload();
}
HTML
<h1>Select one campus</h1>
<form>
<input id="Belfast" type="radio">Belfast
<input id="Jordanstown" type="radio">Jordanstown
<input id="Magee" type="radio"> Magee
<input id="Coleraine" type="radio"> Coleraine
<br> <br>
<input type="button" value="Count">
</form>
<input type="button" value="Reload page" onclick="reloadPage()">
小提琴
onmouseover和jquery函數無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.