0

なぜこれが機能しないのか、誰か説明してもらえますか?

申し訳ありませんが、私は javascript + jQuery の初心者です。

コードは次のとおりです。

JavaScript / jQuery:

<script type="text/javascript"> 
    $('.clickk').click(function(e){
        window.location.href = $(this).find('a').attr('href');
    });
</script>

HTML:

 <div  class="clickk" >
    <a href="google.com">link</a>
    blah blah blah.
 </div>

足りないものを見つけるのを手伝ってください。

前もって感謝します。質問が明確であることを願っています。

4

5 に答える 5

7

考えられる 2 つの問題:

  1. そのクラスの要素が DOM に存在する前に、おそらくそのスクリプトを実行しています (詳細は後述)。

  2. は、たとえば、またはhrefで始まる必要があります。相対リンクにするだけで、確実には機能しません。http://href="http://www.google.com"href="http://google.com"href="google.com"

＃2を修正すると仮定すると、＃1の詳細は次のとおりです。

動作しません:

<!-- ... -->
<head>
<!-- ... -->
<script type="text/javascript"> 
  $('.clickk').click(function(e){
     window.location.href = $(this).find('a').attr('href');
  });
</script>
</head>
<body>
<!-- ... -->
<div  class="clickk" >
   <a href="http://google.com">link</a>
   blah blah blah.
</div>

これを修正するには、次の 2 つの方法があります。

ページの最後にスクリプトを配置する

これは通常、スクリプトをページの最初ではなく最後に配置するための推奨される方法です。

作品:

<body>
<!-- ... -->
<div  class="clickk" >
   <a href="http://google.com">link</a>
   blah blah blah.
</div>
<!-- ... -->
<script src="jquery.js"></script>
<script type="text/javascript"> 
  $('.clickk').click(function(e){
     window.location.href = $(this).find('a').attr('href');
  });
</script>
</body>

これにより、スクリプトのダウンロードを待機している間にレンダリングが停止しないため、見かけ上のページの読み込み時間も短縮されます。YUI のガイドライン(またはその他のガイドライン)を参照してください。スクリプトの上で定義された DOM 要素は、そのスクリプトからアクセスできます。スクリプトの下に定義された DOM 要素はそうではありません (遅延させるために次のようなことをしない限り)。

readyイベントを利用する

何らかの理由でスクリプトを最後に置くことが適切でない場合は、readyイベントを使用できます。

作品:

<!-- ... -->
<head>
<!-- ... -->
<script type="text/javascript"> 
  jQuery(function($) {
      $('.clickk').click(function(e){
         window.location.href = $(this).find('a').attr('href');
      });
  });
</script>
</head>
<body>
<!-- ... -->
<div  class="clickk" >
   <a href="http://google.com">link</a>
   blah blah blah.
</div>

jQuery関数を に(またはを使用しない限り$の単なるエイリアスである) に渡すことは、;に関数を渡すことと同じであることに注意してください。詳細: http://api.jquery.com/jQuery/#jQuery3jQuerynoConflict$(document).ready(...)

于 2012-09-30T10:04:45.110 に答える
0

これを使って

$(document).ready(function(){    
    $('.clickk').click(function(e){
        window.location.href = $(this).find('a').attr('href');}
    });
)});
于 2012-09-30T09:59:16.980 に答える
0

それ以外の

 href="google.com" // This is a relative url

試す

href="http://www.google.com/"  // Instead

また、それを DOM Ready イベントに入れます。要素が DOM に存在する前にスクリプトが実行された可能性があります。

<script type="text/javascript"> 
 $(function() {
    $('.clickk').click(function(e){
       window.location.href = $(this).find('a').attr('href');
    });
  });
</script>

デモ

于 2012-09-30T09:59:25.250 に答える
0

これを試して

ready イベントを使用する

<script> 
 $(document).ready(function() {
    $('.clickk').click(function(e){
       window.location.href = $(this).find('a').attr('href');
    });
  });
</script>
于 2012-09-30T10:01:33.240 に答える
-1

私の2つのビットを追加するだけです。次のコードを使用できます。他の人からの答えもあなたのために働くはずですが(個人的にはwindow.location.hrefを使うという考えは好きではありませんでした:))

<script type="text/javascript"> 
$(document).ready(function(){
  $('.clickk').click(function(e){
     $(this).find('a')[0].click();
  });
  });
</script>


<div  class="clickk" style="cursor:pointer">
   <a href="http://google.com">link</a>
   blah blah blah.
 </div>?
于 2012-09-30T10:29:10.203 に答える