如何在Javascript / jQuery中切换开关

Question

如何在Javascript / jQuery中切换开关

5

我有以下HTML和JavaScript代码。它应该实现这个功能：当我点击“是”时，显示文本区域框，里面写着我喜欢计算机科学的原因；当我点击“否”时，相反。但它并没有实现以上功能，需要帮忙吗？

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

- shiva upadhyay

使用Jquery尝试$("xxx").toggle()。 - Akhil Thayyil

@mplungjan 嗯，这是文本区代码上的一个标识符。它一直存在，但在用户点击“是”或“否”之前被隐藏起来。但是现在它不起作用了，能帮我修复一下吗？ - shiva upadhyay

@shivaupadhyay，你能不能创建一个jsfiddle.net以便更好地理解呢？ - Amy

你可以使用toggle代替show和hide，并为两个元素设置单个事件处理程序。 - Akhil Thayyil

当您隐藏了“显示”并且它们在其中时，有人如何点击“是”或“否”按钮，因为它们也被隐藏了。 - Suchit kumar

显示剩余2条评论

6个回答

2

这应该可以正常工作，文本框应该会出现在您面前！

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

- Paul Lesny

2

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

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

或者

如下评论所建议的：

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

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

- K K

2

或者更简单的方式是 $("#hide").toggle(this.id=="yes");。 - mplungjan

@mplungjan 谢谢。我不知道这个。+1 - K K

1

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

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

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

- Vitorino fernandes

在这里，您可以使用 $("#hide").toggle(this.id=="yes");。 - mplungjan

1

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

- Fede Snieg

1

尝试这个：首先检查单选按钮的值，然后使用jQuery的show();和hide();方法来切换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>

- Amy

$("#hide").toggle(value=="yes"); 或者 $("#hide").toggle(this.id=="yes"); - mplungjan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Avinash Antala · Accepted Answer

your answer is ..........

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