Question

当我点击No时，文本框应该隐藏但不会发生。当我将div放在我调用td事件的onclick内时，它正在运行。

<!DOCTYPE html>
<html>
    <head>
    <script>   
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">   
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#data").show();
            });
            $("#btn2").click(function(){
                $("#data").hide();
            });
        });
    </script>
</head>

<table>
    <tr>
        <th>Table</th>
        <td>
            <input type="radio" id="btn1" name="gate" value="N" checked>Yes</input>
            <input type="radio" id="btn2" name="gate" value="E" >No</input>  
        </td>
    </tr>

    <div id="data" style="padding-top: 10px">
        <tr>
            <th>GATE</th>
            <td><input type="text" name="gate1" value=gate1 size="20"></td>
        </tr>
    </div>
</table> 
</html>

Answer 1

看看

＆＃13;

 $(document).ready(function(){
  $("#btn1").click(function(){
  $("#data").show();
 });
 $("#btn2").click(function(){
  $("#data").hide();
 });
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">   
</script>

</head>

<table>
<tr>
<th>Table</th>
<td>
  <input type="radio" id="btn1" name="gate" value="N" checked>Yes</input>
  <input type="radio" id="btn2" name="gate" value="E" >No</input>  
</td>
</tr>
<tr  id="data">
<th>GATE</th>
<td><input type="text" name="gate1" value=gate1 size="20"></td>
</tr>


</table> 
</html>

＆＃13;

Answer 2

你将div放在桌子内 - 你不应该这样做。试试这段代码：

    $(document).ready(function() {
      $("#btn1").click(function() {
        $(".data").show();
      });
      $("#btn2").click(function() {
        $(".data").hide();
      });
    });

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<table>
  <tr>
    <th>Table</th>
    <td>
      <input type="radio" id="btn1" name="gate" value="N" checked/>Yes
      <input type="radio" id="btn2" name="gate" value="E" />No
    </td>
  </tr>

  <tr class="data" style="padding-top: 10px">
    <th>GATE</th>
    <td>
      <input type="text" name="gate1" value=gate1 size="20">
    </td>
  </tr>

  <tr class="data" style="padding-top: 10px">
    <th>GATE</th>
    <td>
      <input type="text" name="gate2" value=gate2 size="20">
    </td>
  </tr>

</table>

</html>

当在表的td块之外调用div时，jquery hide和show不起作用

2 个答案: