/ / Funkcja przycisku JQuery nie działa w ogóle - jquery

Funkcja kliknięcia przycisku Jquery w ogóle nie działa - jquery

Próbuję uzyskać tekst poniżej mojego formularzazmienić w zależności od wyboru 2 przycisków radiowych "tak" lub "nie". Mam funkcję getCats, która ustawia catVal na wybrany przycisk opcji. Funkcja showCats zawiera instrukcję if, która zmienia tekst na podstawie wartości catVal. Prześlij to identyfikator przycisku przesyłania dla formularza, a cat to nazwa przycisku "tak" i "nie".

Obecnie funkcja on click nie działa, alert nie pojawia się.

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

Odpowiedzi:

1 dla odpowiedzi № 1

W Twoim kodzie jest wiele zmian.

  1. Musisz zmienić selektor. Również lepiej jest użyć nazwy grupy radiowej, zamiast sprawdzać każdy przycisk opcji w pętli for.
  2. catValue powinno być parametrem funkcji, aby można go było ponownie użyć.
  3. Zamiast przesyłać, należy użyć przycisku, aby uniknąć odświeżania strony

    Here is working plunker: [Plunker][1]
    

Oto kod:

$(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>


1 dla odpowiedzi nr 2

Masz więcej niż jeden problem:

  • w celu obliczenia catVal możesz po prostu napisać: $ ("[name =" cat "]: checked"). val ()
  • funkcja showCats wymaga wprowadzenia poprzedniej wartości 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 dla odpowiedzi № 3

Prześlij to identyfikator przycisku przesyłania formularza

Podejrzewam, że Twój problem jest związany z przekierowaniem przeglądarki po przesłaniu formularza ... Myślę, że powinieneś wypróbować następujący kod:

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