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.');
}
}
答
有需要你的代码多次更改。
- 您需要更改选择器。此外,最好使用无线电组名称,而不是检查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>
答
提交的提交按钮为形式
我怀疑,当你提交表单你的问题是关系到浏览器重定向的ID ......我想你应该尝试以下代码:
$('form').submit(function (e) {
e.preventDefault();
alert('k');
getCats();
});
答
你有一个以上的问题更多:
- 为了计算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>
+0
很好的回答,错过了':checked'。删除了我的答案;) –
VAR的猫= $([名称= '猫']);应该给你一个语法错误。 它可能是... –
另外,如果你要比较字符串,请确保使用===而不是==。 –
@Adrián的一个问题,如果比较字符串,为什么还需要三重等号?我以为你只需要如果你想检查变量的类型。 –