/ / Jqueryボタンのクリック機能がまったく機能しない - jquery

Jqueryボタンのクリック機能がまったく機能しない - jquery

私は自分のフォームの下のテキストを2つのラジオボタンの選択に基づいて「はい」または「いいえ」に変更します。私は選択されたラジオボタンにcatValを設定する関数getCatsを持っています。関数showCatsは、catValの値に基づいてテキストを変更するif文を備えています。 Submitはフォームの送信ボタンのIDで、catはyesとnoのラジオボタンの名前です。

現在のところ、オンクリック機能は動作していないため、アラートは表示されません。

$(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.");
}
}

回答:

回答№1は1

コードには複数の変更が必要です。

  1. セレクターを変更する必要があります。また、forループ内の各ラジオボタンをチェックする代わりにラジオグループ名を使用する方が良いでしょう。
  2. catValueは関数のパラメータでなければならないので、再利用可能です。
  3. ページのリフレッシュを避けるには、サブミットの代わりにボタンを使用する必要があります

    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="jquery@*" 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>


回答№2の場合は1

あなたには複数の問題があります:

  • を計算する catVal $( "[name =" cat "]:checked")。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>


回答№3の場合は0

Submitは、フォームの送信ボタンのIDです。

私はあなたの問題は、フォームを送信するときにブラウザのリダイレクトに関連していると思う...私はあなたが次のコードを試してくださいと思う:

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