0

私の Web ページには、特定の要素を持つ以前の確実なフィールドがあります。したがって、以前の手術を確認すると、以前の手術の要素のみが表示されます。以下は私のコードの一部ですが、正しく機能していません。誰でも教えてください

<!DOCTYPE html>
<html>
<head>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>



  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script>
$(function(){
   $('.toggler').click(function(){
       if (this.checked) {
           $('div#name').slideDown();
       } else {
           $('div#name').slideUp();
       }
   });
})
  </script>
</head>
<body>
<table>
<tr>

                    <td  height="30">
                        <b>Previous Surgery</b>
                    </td>

                    <td>
<input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
                    </td>
                </tr>
<div id="name">

<tr><td>Type of Surgery</td><td><input type="text"></td></tr>
<tr><td>Main Reason for surgery</td><td><input type="text"></td></tr>

<tr><td>Year</td><td><input type="text"></td></tr>
<tr><td>Reffered By</td><td><input type="text"></td></tr>
</div>

</table>
</body>
</html>
4

4 に答える 4

2

理由は、HTML が無効です。Div を の直接の子にすることはできませんtable。

HTML を修正してください:-

<table>
    <tr>
        <td height="30"> <b>Previous Surgery</b>

        </td>
        <td>
            <input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
        </td>
    </tr>
</table>
<div id="name">
    <table>
        <tr>
            <td>Type of Surgery</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>Main Reason for surgery</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>Year</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>Reffered By</td>
            <td>
                <input type="text">
            </td>
        </tr>
    </table>
</div>

JS

$(function () {
    $('.toggler').click(function () {
        $('#name').slideToggle();
    });
})

フィドル

要素に id がある場合は、それを単独で使用してください。一意であり、パフォーマンスの費用対効果が低いと考えられます。

ドクから

ID セレクターの場合、jQuery は非常に効率的な JavaScript 関数 document.getElementById() を使用します。h2#pageTitle などの別のセレクターが id セレクターにアタッチされている場合、jQuery は要素を一致として識別する前に追加のチェックを実行します。

より#nameも優れていdiv#nameます。

@イアンに感謝

于 2013-05-25T05:37:49.027 に答える
0

単にこのようにしてみてください

$(function(){
$('.toggler').click(function(){
   $('div#name').toggle();       
 });
})

このフィドルを試してみてください

フィドルで述べたように、divをテーブルの外に置いてみてください

于 2013-05-25T05:35:02.843 に答える
0

div 要素の配置が間違っています。その div を適切な場所に配置してください。SlideUp メソッドと SlideDown メソッドが機能するはずです。

于 2013-05-25T05:48:24.863 に答える
0

Working FIDDLE Demo

<div id="name">あなたはあなたの間を持つことはできませんtr。の前にテーブルを閉じて、divもう一度開きます。

<table>
    <tr>
        <td height="30">
            <b>Previous Surgery</b>
        </td>
        <td>
            <input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
        </td>
    </tr>
</table>


<div id="name">
    <table>
        <tr><td>Type of Surgery</td><td><input type="text"></td></tr>
        <tr><td>Main Reason for surgery</td><td><input type="text"></td></tr>
        <tr><td>Year</td><td><input type="text"></td></tr>
        <tr><td>Reffered By</td><td><input type="text"></td></tr>
    </table>
</div>
于 2013-05-25T05:40:13.033 に答える