jquery按鈕點擊功能根本不起作用

我試圖讓我的表格下方的文本根據您選擇的2個單選按鈕'yes'或'no'進行更改。我有一個函數getCats將catVal設置爲所選的單選按鈕。 showCats函數具有if語句，該語句根據catVal的值更改文本。 Submit是表單提交按鈕的ID，cat是yes和no單選按鈕的名稱。jquery按鈕點擊功能根本不起作用

目前點擊功能不起作用，警報從不出現。

$(document).ready(function(){ 
    $('#submit').click(function(){ 
     alert('k'); 
     getCats(); 
    }); 
}); 
function getCats() { 
    var cats = $([name='cat']); 
    var catVal; 
    for(var i = 0; i < cats.length; i++){ 
     if(cats[i].checked){ 
      catVal = cats[i].value; 
     } 
    } 
    showCats(); 
} 
function showCats(){ 
    alert('show'); 
    if (catVal == 'yes'){ 
     $("#catReact").text('Hello fellow cat lover!'); 
    } 
    if (catVal == 'no'){ 
     $("#catReact").text('I guess you must be a dog person.'); 
    } 
}

來源

2017-04-26 Kait Jardine

VAR的貓= $（[名稱= '貓']）;應該給你一個語法錯誤。它可能是... –

另外，如果你要比較字符串，請確保使用===而不是==。 –

@Adrián的一個問題，如果比較字符串，爲什麼還需要三重等號？我以爲你只需要如果你想檢查變量的類型。 –

有需要你的代碼多次更改。

您需要更改選擇器。此外，最好使用無線電組名稱，而不是檢查for循環中的每個單選按鈕。
catValue應該是函數的一個參數，所以它可以重用。
您應該使用一個按鈕而不是提交，避免頁面刷新
```
Here is working plunker: [Plunker][1] 
```

這裏是代碼：

$(document).ready(function(){ 
 
$('#submit').click(function(){ 
 
    alert('k'); 
 
    getCats(); 
 
}); }); 
 
function getCats() { 
 
var catVal= $("[name='cat']:checked").val();; 
 

 
showCats(catVal); } 
 
function showCats(catVal){ 
 
    alert(catVal); 
 
    console.log($("#catReact")) 
 
    if (catVal == 'yes'){ 
 
     $("#catReact").text('Hello fellow cat lover!'); 
 
    } 
 
    if (catVal == 'no'){ 
 
     $("#catReact").text('I guess you must be a dog person.'); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <h1>Hello Plunker!</h1> 
 
    <form action=""> 
 
    <input type="radio" id="radio1" name="cat" value="yes"> Cat<br> 
 
    <input type="radio" id="radio2" name="cat" value="no"> Dog<br> 
 
    
 
    <input type="button" id="submit" value="submit"> 
 
    <div id="catReact" ></div> 
 
</form> 
 
    
 
    </body> 
 

 
</html>

來源

2017-04-26 22:37:00 alpeshpandya

提交的提交按鈕爲形式

我懷疑，當你提交表單你的問題是關係到瀏覽器重定向的ID ......我想你應該嘗試以下代碼：

$('form').submit(function (e) { 
    e.preventDefault(); 
    alert('k'); 
    getCats(); 
});

來源

2017-04-26 22:13:47 Badacadabra

你有一個以上的問題更多：

爲了計算catVal可以簡單的寫：$（「[NAME = '貓']：勾選」）VAL（）
功能showCats需要輸入先前catVal

$(document).ready(function() { 
 
    $('#submit').click(function (e) { 
 
     e.preventDefault(); 
 
     getCats(); 
 
    }); 
 
}); 
 
function getCats() { 
 
    var catVal = $("[name='cat']:checked").val(); 
 
    showCats(catVal); 
 
} 
 
function showCats(catVal) { 
 
    if (catVal == 'yes') { 
 
     $("#catReact").text('Hello fellow cat lover!'); 
 
    } 
 
    if (catVal == 'no') { 
 
     $("#catReact").text('I guess you must be a dog person.'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form action=""> 
 
    <input type="radio" name="cat" value="yes"> I love cats<br> 
 
    <input type="radio" name="cat" value="no" checked> I dislike cats<br> 
 
    <input type="submit" id="submit" value="Submit"> 
 
</form> 
 

 
<p id="catReact"></p>

來源

2017-04-26 22:16:01 gaetanoM

很好的回答，錯過了'：checked'。刪除了我的答案;） –

jquery按鈕點擊功能根本不起作用

回答

相關問題