Come attivare Javascript/jQuery

Ho questo codice di script HtML e java di seguito. Supponiamo di farlo: quando clicco su sì, la casella textarea che dice perché mi piace cs è supposta apparire e quando clicco su no, viceversa. ma non lo fa, qualche aiuto?Come attivare 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>

fonte

2014-11-20 shiva upadhyay

utilizzando jQuery Prova $ ("xxx"). Alternare() –

@mplungjan ya suo un id dv sul codice area di testo. è lì, ma nascosto fino a quando l'utente fa clic su sì o no? ma non funziona, può aiutarmi a risolverlo –

@AkhilThayyil come? puoi mostrarmi dov'è il mio errore e come risolverlo? –

Questo dovrebbe funzionare, la casella di testo dovrebbe apparire per voi!

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

fonte

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

fonte

2014-11-20 05:03:50

Anche qui è possibile usare '$ (" # hide "). Toggle (this.id ==" yes ");' – mplungjan

la vostra risposta è ..........

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

fonte

2014-11-20 05:09:45

non cambio il codice relativo all'immagine l'unico cambiamento in si/no codice –

$ (" # sì ") e $ (" # no ") - utilizza l'ID invece della classe – mplungjan

È possibile utilizzare operatore ternario per questo scopo: JS:

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

come suggerito nei commenti qui sotto:

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

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

fonte

2014-11-20 05:11:01

o più semplice' $ ("# nascondi"). attiva/disattiva (this.id == "si"); ' – mplungjan

@mplungjan Grazie . Non lo sapevo. +1 –

Prima di tutto, dovrei cambiare i valori di radio di tipo input per vero o falso. Inoltre, penso che tu non stia scrivendo il codice che vuoi. Ad esempio, in un primo momento entrambe le div sono nascoste e nulla le fa apparire (perché anche le radio sono nascoste).

Penso che questo è sicuramente un approccio migliore a questo:

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

fonte

2014-11-20 05:11:12

Try This: controlla Inizialmente il valore del pulsante di opzione e utilizzare show(); e hide(); metodo di jQuery per ginocchiera l'elemento 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>

fonte

2014-11-20 05:13:00 Amy

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

Come attivare Javascript/jQuery

risposta

Problemi correlati