堆栈内存溢出
  繁体   English   中英

如何在Javascript / jQuery中切换

[英]How to toggle in Javascript / jQuery

 原文  2014-11-20 04:54:26  3   6    javascript/ html/ css/ performance

问题描述

我在下面有这个HtML和java脚本代码。 它假设这样做：当我点击是的时，textarea框说明为什么我喜欢cs是假设出现，当我点击否，反之亦然。 但它不做，有什么帮助吗？ 

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

6 个解决方案

解决方案1
 3  2014-11-20 05:09:45

你的答案是.......... 

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

解决方案2
 2  2014-11-20 05:11:01

您可以使用三元运算符来实现此目的：JS： 

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

要么

如以下评论中所示： 

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

演示： http ： //jsfiddle.net/lotusgodkk/wg6zx2wj/1/

解决方案3
 2 已采纳  2014-11-21 01:39:54

这应该工作，文本框应该出现给你！ 

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

解决方案4
 1  2014-11-20 05:03:50

演示 - http://jsfiddle.net/victor_007/wg6zx2wj/ 

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

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

解决方案5
 1  2014-11-20 05:11:12

首先，我应该将输入类型的无线电值更改为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>

解决方案6
 1  2014-11-20 05:13:00

试试这个：最初检查单选按钮的值并使用show(); 并hide(); 用于切换div元素的jQuery方法 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jquery / javascript切换某些元素？ 如何使用jQuery切换JavaScript功能 如何使用JavaScript切换某些jQuery效果 如何使用 Javascript 或 jquery 在样式之间切换 如何使用Javascript / jquery切换手风琴 如何使用 JavaScript/jQuery“this”关键字来切换行 如何通过jquery / javascript将切换发布到rails 将Jquery Toggle转换为Javascript 点击使用jQuery / JavaScript切换 Javascript (NO JQUERY) 切换 Div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM