-3

以下のコードをサイトに追加しようとするたび<a href>に、ページ上のすべてのリンクが開きます。すべてのリンクを開かずにこのコードを機能させるにはどうすればよい<a href>ですか? また、クリック機能に使用する代わりに、ボタンとその ID を使用できますか?

<!DOCTYPE html>
<html>
<head>
  <style>
      p.one { position:relative; width:400px; height:90px; }
      div.two { position:absolute; width:400px; height:65px; 
        font-size:36px; text-align:center; 
        color:yellow; background:red;
        padding-top:25px; 
        top:0; left:0; display:none; }
        span.three { display:none; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="one">
        Let it be known that the party of the first part
        and the party of the second part are henceforth
        and hereto directed to assess the allegations
        for factual correctness... (<a href="#">click!</a>)
        <div class="two"><span class="three">Click here to continue...</span></div>

      </p>
<script>
        $("a").click(function () {
          $("div").fadeIn(3000, function () {
            $("span").fadeIn(100);
          });
          return false;
        }); 

      </script>

</body>
</html>
4

3 に答える 3

3

thisクリックした要素を参照するキーワードを使用できます。

$(function() {
   $(".one a").click(function(event) {
      $(this).next('div').fadeIn(3000, function(){
         $('span', this).fadeIn();
      })
      event.preventDefault();
   }); 
})

マークアップが無効であることに注意してください。P タグ内で DIV タグを使用すると、ドキュメントが無効になり、セマンティックではなくなります。ほとんどのブラウザは DIV 要素を P タグの外に配置します。現在のコードは、すべての DIV 要素を選択しているためにのみ機能します。現在のマークアップに従って DOM をトラバースすると (私が行ったように)、予期しない結果が得られます。

<div class="one">
    <p>
       Let it be known that the party of the first part
       and the party of the second part are henceforth
       and hereto directed to assess the allegations
       for factual correctness...
    </p>
    <a href="#">click!</a>
    <div class="two"><span class="three">Click here to continue...</span></div>
</div>

また、親要素が非表示の場合、その子もすべて非表示になるため、子を非表示にして 1 つずつ表示する必要はありません。親要素を非表示にして表示するだけで十分です。

http://jsfiddle.net/BhJJa/

于 2012-11-15T12:09:37.610 に答える
1

jquery でid セレクターを使用する必要があります。

$("#YourButtonId").click(function () {
      $("div").fadeIn(3000, function () {
        $("span").fadeIn(100);
      });
      return false;
});
于 2012-11-15T12:07:58.397 に答える
1

これは、クリック イベントを<a>HTML ドキュメント内の every にバインドしているためです。jQueryで選択するには、ボタン/ a idを指定する必要があります

jQuery

$("#btnID").click(function() {
 $("div").fadeIn(3000, function () {
  $("span").fadeIn(100);
 });
 return false;
});

HTML

<a href="javascript:void(0);" id="btnID">click!</a>

<button>これをタグで使用することもできます。

于 2012-11-15T12:11:31.477 に答える