Jak przełączać w JavaScript/jQuery

Mam poniższy kod skryptu HtML i JavaScript. Ma to na celu: po kliknięciu "tak" pole tekstowe, które mówi, dlaczego lubię cs, powinno się pokazywać i kiedy klikam "nie", na odwrót. ale nie robi tego, żadnej pomocy?Jak przełączać w JavaScript/jQuery

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset="utf-8"> 
    <title>forms.html</title> 


<h1> Welcome </h1> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jqueryui. 
css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script> 

$(document).ready(function(){ 
$("img") .mouseover(function() { 
$(this).attr("src", "pika2.jpg"); 
}); 
$("img").mouseout(function() { 
$(this).attr("src", "pika1.jpg"); 
}); 

$("#show").hide(); 
$("#hide").hide(); 


$("#show").click(function(){ 
$("#hide").hide() 
}); 
$("#hide").click(function(){ 
$("#show").show() 
}); 
}); 

</script>  
</head> 

<body> 
<img src="pika1.jpg" alt="piakchu"/> 
<p> Please tell me who you are: </P> 

<form action="sumbit.html"> 


<p> 
<label for="First Name">First name:</label> 
<input type = "text" name="First Name" id="First Name" autofocus> 
</P>  



<p> 
<label for="Last Name">Last Name:</label> 
<input type = "text" name="Last Name" id="Last Name" required > 
</P>  
<div id="show"> 
<p> Do you like computer science: </p> 
<p><input type="radio" name="list" value="yes" id="yes"/> 
<label for="yes">Yes</label> 
<input type="radio" name="list" value="No" id="No"/> 
<label for="No">No</label> 
</P> 
</div> 
<div id="hide"> 
<p> 
<input type="submit" value="Submit your answers"/> 
</p> 

<p> Why don't you like computer science?: </p> 

<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> 
</textarea> 
</div> 


</form> 
</body>

Źródło

2014-11-20 shiva upadhyay

jQuery Spróbuj $ ("XXX"). Przełączania() –

@mplungjan ya jego id dv kodu obszaru tekstu. jest tam, ale ukryty, dopóki użytkownik nie kliknie "tak" lub "nie"? ale nie działa, może mi pomóc to naprawić –

@AkhilThayyil jak? czy możesz mi pokazać, gdzie jest mój błąd i jak to naprawić? –

To powinno działać, pole tekstowe powinno pokazać się dla Ciebie!

$(document).ready(function(){ 
    $("img") .mouseover(function() { 
     $(this).attr("src", "pika2.jpg"); 
    }); 
    $("img").mouseout(function() { 
     $(this).attr("src", "pika1.jpg"); 
    }); 

    $("#hide").hide(); 
    $(".yes").click(function(){ 
     $("#hide").show(); 
    }); 
    $(".no").click(function(){ 
     $("#hide").hide(); 
    }); 
}); 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<body> 
<img src="pika1.jpg" alt="piakchu"/> 
<p> Please tell me who you are: </P> 

<form action="sumbit.html"> 


<p> 
<label for="First Name">First name:</label> 
<input type = "text" name="First Name" id="First Name" autofocus> 
</P>  



<p> 
<label for="Last Name">Last Name:</label> 
<input type = "text" name="Last Name" id="Last Name" required > 
</P>  
<div id="show"> 
<p> Do you like computer science: </p> 
<p><input type="radio" name="list" value="yes" id="yes" class="yes"/> 
<label for="yes">Yes</label> 
<input type="radio" name="list" value="No" id="No" class="no"/> 
<label for="No">No</label> 
</P> 
</div> 
<div id="hide"> 
<p> 
<input type="submit" value="Submit your answers"/> 
</p> 

<p> Why don't you like computer science?: </p> 

<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> 
</textarea> 
</div> 


</form> 
</body>

Źródło

2014-11-21 01:39:54

demo - http://jsfiddle.net/victor_007/wg6zx2wj/

$("input:radio[name=list]").click(function() { 
    var value = $(this).val(); 

    if (value == 'yes') { 
     $("#hide").show() 
    } else { 
     $("#hide").hide() 
    } 
});

Źródło

2014-11-20 05:03:50

Również tutaj możesz użyć '$ (" # hide ") .ggle (to.id ==" yes ");' – mplungjan

odpowiedź jest ..........

$(document).ready(function(){ 
 
\t $("img") .mouseover(function() { 
 
\t \t $(this).attr("src", "pika2.jpg"); 
 
\t }); 
 
\t $("img").mouseout(function() { 
 
\t \t $(this).attr("src", "pika1.jpg"); 
 
\t }); 
 

 
\t $("#hide").hide(); 
 
\t $(".yes").click(function(){ 
 
\t \t $("#hide").show(); 
 
\t }); 
 
\t $(".no").click(function(){ 
 
\t \t $("#hide").hide(); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
<img src="pika1.jpg" alt="piakchu"/> 
 
<p> Please tell me who you are: </P> 
 

 
<form action="sumbit.html"> 
 

 

 
<p> 
 
<label for="First Name">First name:</label> 
 
<input type = "text" name="First Name" id="First Name" autofocus> 
 
</P>  
 

 

 

 
<p> 
 
<label for="Last Name">Last Name:</label> 
 
<input type = "text" name="Last Name" id="Last Name" required > 
 
</P>  
 
<div id="show"> 
 
<p> Do you like computer science: </p> 
 
<p><input type="radio" name="list" value="yes" id="yes" class="yes"/> 
 
<label for="yes">Yes</label> 
 
<input type="radio" name="list" value="No" id="No" class="no"/> 
 
<label for="No">No</label> 
 
</P> 
 
</div> 
 
<div id="hide"> 
 
<p> 
 
<input type="submit" value="Submit your answers"/> 
 
</p> 
 

 
<p> Why don't you like computer science?: </p> 
 

 
<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> 
 
</textarea> 
 
</div> 
 

 

 
</form> 
 
</body>

Źródło

2014-11-20 05:09:45

Nie zmieniam twojego kodu związanego z obrazem jedyna zmiana w kodzie tak/nie –

$ (" #yes ") i $ (" # no ") - użyj identyfikatora zamiast klasy – mplungjan

Można użyć do tego operator potrójny przeznaczenie: JS:

$(document).ready(function() { 
    $("input:radio[name=list]").click(function() { 
     $(this).val() == 'yes' ? $("#hide").show() : $("#hide").hide(); 
    }); 
});

lub

jak zasugerowano w komentarzach poniżej:

$("#hide").toggle(this.id=="yes");

Demo: http://jsfiddle.net/lotusgodkk/wg6zx2wj/1/

Źródło

2014-11-20 05:11:01

lub prostszego' $ ("# hide") przełącz (this.id == "yes"); ' – mplungjan

@mplungjan Dzięki . Nie wiedziałem o tym. +1 –

Przede wszystkim należy zmienić wartości radiowe typ wejścia na prawdziwe lub fałszywe. Ponadto, myślę, że nie piszesz kodu, który chcesz. Na przykład, na początku oba elementy div są ukryte i nic ich nie powoduje (ponieważ również są ukryte).

myślę, że to jest zdecydowanie lepsze podejście do tego:

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset="utf-8"> 
    <title>forms.html</title> 


<h1> Welcome </h1> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jqueryui. 
css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script> 

$(document).ready(function(){ 
    $("img") .mouseover(function() { 
     $(this).attr("src", "pika2.jpg"); 
    }); 
    $("img").mouseout(function() { 
     $(this).attr("src", "pika1.jpg"); 
    }); 

    $("#whyNot").hide(); 

    $(':radio[name="list"]').change(function() { 
     var like = $(this).filter(':checked').val(); 
     if (!JSON.parse(like)) { 
      $("#whyNot").show(); 
     } else { 
      $("#whyNot").hide(); 
     } 
    }); 

}); 

</script>  
</head> 

<body> 
<img src="pika1.jpg" alt="piakchu"/> 
<p> Please tell me who you are: </P> 

<form action="sumbit.html"> 

<p> 
<label for="First Name">First name:</label> 
<input type = "text" name="First Name" id="First Name" autofocus> 
</P>  
<div> 
<label for="Last Name">Last Name:</label> 
<input type = "text" name="Last Name" id="Last Name" required > 
</div>  
<div> 
    <p> Do you like computer science: </p> 
    <p><input type="radio" name="list" value="true"/> 
    <label for="yes">Yes</label> 
    <input type="radio" name="list" value="false"/> 
    <label for="No">No</label> 
    </P> 
</div> 
<div id="whyNot"> 
    <p> Why don't you like computer science?: </p> 
    <textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> 
    </textarea> 
</div> 
<div> 
<input type="submit" value="Submit your answers"/> 
</div> 

</form> 
</body>

Źródło

2014-11-20 05:11:12

Spróbuj to: Początkowo sprawdzić wartość przycisk radiowy i używać show(); i hide(); metody jQuery do przełączania elementu div

$(document).ready(function() { 
 

 
    $("input:radio[name=list]").click(function() { 
 
     var value = $(this).val(); 
 

 
     if (value == 'yes') { 
 
      $("#hide").show(); 
 
     } 
 
     else 
 
     { 
 
      $("#hide").hide(); 
 
     } 
 
     
 
     
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<img src="pika1.jpg" alt="piakchu"/> 
 
<p> Please tell me who you are: </P> 
 

 
<form action="sumbit.html"> 
 

 

 
<p> 
 
<label for="First Name">First name:</label> 
 
<input type = "text" name="First Name" id="First Name" autofocus> 
 
</p>  
 

 

 

 
<p> 
 
<label for="Last Name">Last Name:</label> 
 
<input type = "text" name="Last Name" id="Last Name" required > 
 
</p>  
 
<div id="show"> 
 
<p> Do you like computer science: </p> 
 
<p><input type="radio" name="list" value="yes" id="yes"/> 
 
<label for="yes">Yes</label> 
 
<input type="radio" name="list" value="No" id="No"/> 
 
<label for="No">No</label> 
 
</P> 
 
</div> 
 
<div id="hide"> 
 
<p> 
 
<input type="submit" value="Submit your answers"/> 
 
</p> 
 

 
<p> Why don't you like computer science?: </p> 
 

 
<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> 
 
</textarea> 
 
</div> 
 
</form> 
 
</body>

Źródło

2014-11-20 05:13:00 Amy

'$ (" # hide ") .ggle (wartość ==" yes ");' lub '$ (" # hide ") .ggle (this.id ==" yes ");' – mplungjan

Jak przełączać w JavaScript/jQuery

Odpowiedz

Powiązane problemy