0

Javaスクリプトを使用してクリック時にボタンを非表示にしようとしています。私のコードは何らかの理由で機能していません。コードは次のとおりです。すべてが機能し、アラートが画面にポップアップ表示されますが、非表示機能はうまくいきません。

   <html>
   <head>
   <title>Hello JQuery world!</title>
   <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="script1.js"></script>
   </head>
   <body>
   <table class="data" id="celebs">
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Occupation</th>
        <th>Approx. Location</th>
        <th>Price</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>1</th>
        <th>Johnny</th>
        <th>Wrestler</th>
        <th>Knocksville</th>
        <th>500</th>
    </tr>
        <tr>
        <th>2</th>
        <th>Molly</th>
        <th>Pharmacist</th>
        <th>Germany</th>
        <th>1500</th>
    </tr>
    <tr>
        <th>3</th>
        <th>Scooby Doo</th>
        <th>Detective</th>
        <th>Jersey</th>
        <th>Scooby Snacks</th>
    </tr>
    <tr>
        <th>4</th>
        <th>Pacman</th>
        <th>Character</th>
        <th>Area 51</th>
        <th>20</th>
    </tr>
    <tr>
        <th>5</th>
        <th>Ryu</th>
        <th>Street Fighter</th>
        <th>Japan</th>
        <th>1891564</th>
     </tr>
      </tbody>

      </table>
      <input type="button" id="hideButton" value="hide" />
      <input type="button" id="disclaimer" value="hide" />
      </body>
     </html>

Javaスクリプトは次のように読み取ります

       $(function(){
        alert('Welcome');
         });

      $(function(){
 alert($('#celebs tbody tr:even').length + ' elements!');
      });
      $('#hideButton').click(function(){
$('#celebs').hide();
    });
    $(function(){
var fontSize = $('#celebs tbody tr:first').css('font-size');
alert(fontSize);
     });
   $(function(){
$('#celebs tbody tr:even').css('background-color', '#0C6');
    });
   $(function(){
$('#celebs tbody tr:odd').css({'background-color': '#930', 'color':'#C6F' }
    );
    });
4

1 に答える 1

1

ドキュメントが読み込まれる前に、イベント バインディング関数が呼び出されます。したがって、イベントバインディングは機能しません。イベント バインディング関数を(function(){..})ブロックに配置する必要があります。

$(function(){
        alert('Welcome');
        alert($('#celebs tbody tr:even').length + ' elements!');
        $('#hideButton').click(function(){
            $('#celebs').hide();
        });
        var fontSize = $('#celebs tbody tr:first').css('font-size');
        alert(fontSize);
        $('#celebs tbody tr:even').css('background-color', '#0C6');
        $('#celebs tbody tr:odd').css({'background-color': '#930', 'color':'#C6F' }
        );
    });
于 2013-11-07T23:31:49.753 に答える