如何在Javascript/jQuery中切换_Javascript_Html_Css_Performance

如何在Javascript/jQuery中切换

javascript html css performance

如何在Javascript/jQuery中切换,javascript,html,css,performance,Javascript,Html,Css,Performance,下面是我的HtML和java脚本代码。假设是这样的：当我点击yes时，显示为什么我喜欢cs的文本框就会出现，当我点击no时，反之亦然。但它没有这样做，有什么帮助吗 <!DOCTYPE html> <html lang = "en"> <head> <meta charset="utf-8"> <title>forms.html</title> <h1> Welcome </h1&

下面是我的HtML和java脚本代码。假设是这样的：当我点击yes时，显示为什么我喜欢cs的文本框就会出现，当我点击no时，反之亦然。但它没有这样做，有什么帮助吗

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


forms.html
欢迎
$（文档）.ready（函数（）{
$（“img”）.mouseover（函数（）{
$（this.attr（“src”，“pika2.jpg”）；
});
$（“img”）.mouseout（函数（）{
$（this.attr（“src”，“pika1.jpg”）；
});
$（“#显示”）.hide（）；
$（“#隐藏”）.hide（）；
$（“#显示”）。单击（函数（）{
$（“#隐藏”）.hide（）
});
$（“#隐藏”）。单击（函数（）{
$（“#show”）.show（）
});
});
请告诉我你是谁：

名字：


姓氏：

你喜欢计算机科学吗

对
不



你为什么不喜欢计算机科学

演示-

你的答案是

$（文档）.ready（函数（）{
$（“img”）.mouseover（函数（）{
$（this.attr（“src”，“pika2.jpg”）；
});
$（“img”）.mouseout（函数（）{
$（this.attr（“src”，“pika1.jpg”）；
});
$（“#隐藏”）.hide（）；
$（“.yes”）。单击（函数（）{
$（“#隐藏”）.show（）；
});
$（“.no”）。单击（函数（）{
$（“#隐藏”）.hide（）；
});
});

请告诉我你是谁：

名字：


姓氏：

你喜欢计算机科学吗

对
不



你为什么不喜欢计算机科学
为此，可以使用三元运算符：
JS:
或
如以下评论所示：
$("#hide").toggle(this.id=="yes");

演示：
首先，我应该将输入类型的无线电值更改为true或false。
另外，我认为您没有编写所需的代码。例如，起初两个div都是隐藏的，没有任何东西使它们显示（因为收音机也是隐藏的）
我认为这绝对是一个更好的方法：
<!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>


forms.html
欢迎
$（文档）.ready（函数（）{
$（“img”）.mouseover（函数（）{
$（this.attr（“src”，“pika2.jpg”）；
});
$（“img”）.mouseout（函数（）{
$（this.attr（“src”，“pika1.jpg”）；
});
$（“#whyNot”）.hide（）；
$（':radio[name=“list”]'）。更改（函数（）{
var like=$（this.filter（':checked'）.val（）；
if（！JSON.parse（like））{
$（“#whyNot”）.show（）；
}否则{
$（“#whyNot”）.hide（）；
}
});
});
请告诉我你是谁：

名字：

姓氏：
你喜欢计算机科学吗

对
不

你为什么不喜欢计算机科学
试试这个：首先检查单选按钮的值，然后使用show（）和隐藏（）方法

$（文档）.ready（函数（）{
$（“输入：radio[name=list]”）。单击（函数（）{
var值=$（this.val（）；
如果（值=‘是’）{
$（“#隐藏”）.show（）；
}
其他的
{ 
$（“#隐藏”）.hide（）；
}
});
});

请告诉我你是谁：

名字：


姓氏：

你喜欢计算机科学吗

对
不



你为什么不喜欢计算机科学
这应该行得通，文本框应该会显示出来
$(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>

$（文档）.ready（函数（）{
$（“img”）.mouseover（函数（）{
$（this.attr（“src”，“pika2.jpg”）；
});
$（“img”）.mouseout（函数（）{
$（this.attr（“src”，“pika1.jpg”）；
});
$（“#隐藏”）.hide（）；
$（“.yes”）。单击（函数（）{
$（“#隐藏”）.show（）；
});
$（“.no”）。单击（函数（）{
$（“#隐藏”）.hide（）；
});
});
请告诉我你是谁：

名字：


姓氏：

你喜欢计算机科学吗

对
不



你为什么不喜欢计算机科学
使用Jquery Try$（“xxx”）.toggle（）@mplungjan ya在文本区号上有一个dv id。它在那里，但隐藏，直到用户点击是或否？但它不起作用，可以帮我修复吗it@AkhilThayyil怎样？你能告诉我我的错误在哪里以及如何修复它吗？@shivaupadhyay你能制作jsfiddle.net以便更好地理解吗？你可以调用toggle并为这两个元素使用一个事件处理程序，而不是show和hide。我不要更改与图像相关的代码。唯一的更改是/否代码$（“#是”）和$（#否”）-请使用ID而不是类$（“#隐藏”）。切换（值=“是”）
或$（“#隐藏”）.toggle（this.id==“yes”）
或更简单的$（“#隐藏”）.toggle（this.id==“yes”）@mplungjan谢谢。我不知道这件事+1在这里您还可以使用$（“#hide”）.toggle（this.id==“yes”）
<!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>

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