-1

私は自分自身にJavascript（Jqueryを使用）を教えており、クリック機能で表示/非表示を実行しようとしています。

現在、Sublime Text 2を使用して実行しており、ローカルホストによってブラウザーで表示しようとしています。これは、HTML5ボイラープレートでも実行しています。

以下は私のコードです。

Jqueryを呼び出すには

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

脚本

 <script type="text/javascript">
    $(document).ready(function()
{
    $('p').hide();
});

  </script>

HTML

<a href="#" id="paragraphAnchor">click me</a>
 <p>This is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a test</p>

私は自分のHTMLドキュメント内でこれらすべてを行っています。ベストプラクティスではありませんが、私は小さなことから始めようと思いました。

今私はこれをします、そしてテキストは隠されさえしません。

どうしてこれなの？

アップデート：

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <!-- end CSS-->

  <script src="js/libs/modernizr-2.0.6.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function()
{
  $('p').hide();
  $(a#paragraphAnchor).click(function()
  {
    $('p').show();
  });
});

  </script>
</head>

<body>


 <a href="#" id="paragraphAnchor">click me</a>
 <p>This is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a test</p>


  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="js/plugins.js"></script>
  <script defer src="js/script.js"></script>
  <!-- end scripts-->


  <script> // Change UA-XXXXX-X to be your site's ID
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>


  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->

</body>
</html>

更新：問題は解決しました

HTML5ボイラープレートはJavaScriptを次のように呼び出す必要があったようです

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>

それ以外の：

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

または、少なくともそれが私がそれを機能させる方法です。

</ p>

4

5 に答える 5

1

jQueryURLにプロトコルがありません。この行：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

読む必要があります

http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js _

編集：これは、ファイルがローカルにロードされているため、想定されるプロトコルfileがHTTP（S）を介してjqueryライブラリをロードできないためです。

これは、コンソールを確認することで確認できます。Chromeのレポート：

Failed to load resource file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
于 2012-08-18T14:25:16.347 に答える
1

これを試して：

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <!-- end CSS-->

  <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type='text/javascript' src="js/libs/modernizr-2.0.6.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
       $('p').hide();
       $('#paragraphAnchor').click(function() {
           $('p').show();
       });
    });
  </script>
</head>

jQueryはページに読み込まれません。セレクターには、引用符を使用する必要があることに注意してください。

于 2012-08-18T14:42:41.430 に答える
0

$(document).readyこれは、関数内で必要なものです

$('#paragraphAnchor').click(function() {
  $('p').toggle();
});
于 2012-08-18T14:24:45.383 に答える
0

このコードを確認してください。正常に動作します

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 <script>
    $(document).ready(function()
{
      $("p").hide();
      $("a").click(function () {
      $("p").slideToggle("slow");
    });
});
</script>

</head>
<body>
<a href="#" id="paragraphAnchor">click me</a>
 <p>This is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a test</p>
 </body>
</html>
于 2012-08-18T14:37:52.467 に答える
0

ロードされる前にjqueryコードを呼び出しているようです。

これを追加：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

この前に：

<script type="text/javascript">
    $(document).ready(function()
{
  $('p').hide();
  $('a#paragraphAnchor').click(function()
  {
    $('p').show();
  });
});

  </script>

例えば：

<head>
  ...

  <script src="js/libs/modernizr-2.0.6.min.js"></script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

  <script type="text/javascript">
    $(document).ready(function()
{
  $('p').hide();
  $('a#paragraphAnchor').click(function()
  {
    $('p').show();
  });
});

  </script>
</head>
...
于 2012-08-18T14:41:02.383 に答える