Wie in Javascript/jQuery

umschalten Ich habe diese Html und Java Script-Code unten. Das soll ich tun: Wenn ich auf "Ja" klicke, erscheint die TextBox, die sagt, warum ich CS mag, und wenn ich auf "Nein" klicke, umgekehrt. aber es tut es nicht, irgendeine Hilfe?Wie in 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>

Quelle

2014-11-20 shiva upadhyay

mit JQuery $ Versuchen ("xxx"). Hin- und herzuschalten() –

@mplungjan ya its a dv-ID auf den Textbereich Code. es ist dort versteckt, bis der Benutzer auf Ja oder Nein klickt? aber es funktioniert nicht, kann mir helfen, es zu beheben –

@AkhilThayyil wie? Kannst du mir zeigen, wo mein Fehler ist und wie ich ihn beheben kann? –

Dies sollte für Sie arbeiten, sollte das Textfeld angezeigt!

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

Quelle

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

Quelle

2014-11-20 05:03:50

Auch hier können Sie '$ (" # verstecken ") verwenden. Toggle (this.id ==" yes ");' – mplungjan

Ihre Antwort ..........

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

Quelle

2014-11-20 05:09:45

ich ändere nicht Ihren bildbezogenen Code die einzige Änderung in Ja/Nein Code –

$ (" #yes ") und $ (" # no ") - bitte verwenden Sie die ID anstelle der Klasse – mplungjan

Sie ternären Operator für diesen Einsatz Zweck: JS:

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

oder

wie unten in den Kommentaren vorgeschlagen:

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

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

Quelle

2014-11-20 05:11:01

oder einfacher' $ ("# hide"). toggle (this.id == "yes"); ' – mplungjan

@mplungjan Thanks . Ich wusste nichts davon. +1 –

Zunächst einmal sollte ich Eingabetyp Radio Werte wahr oder falsch ändern. Außerdem denke ich, dass Sie nicht den Code schreiben, den Sie wollen. Zum Beispiel sind zuerst beide Divs versteckt und nichts lässt sie erscheinen (weil Radios auch versteckt sind).

Ich denke, dies ist definitiv ein besserer Ansatz zu, dass:

<!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>

Quelle

2014-11-20 05:11:12

diese Versuche: Zunächst den Wert von Optionsfeld überprüfen und show(); und hide(); Methode von jQuery für Toggle das div-Element

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

Quelle

2014-11-20 05:13:00 Amy

'$ (" # hide "). Toggle (Wert ==" yes ");' oder '$ (" # hide "). Toggle (this.id ==" yes ");' – mplungjan

Wie in Javascript/jQuery

Antwort

Verwandte Themen