0

完全な Jquery noob です。ここでホストされています: mySite

興味深いのはフッターです。サイトマップを押して、フッターをうまく展開して、それが行っている素敵なサイトマップを表示したいと思います. サイトマップのボタンを閉じるボタンに変更したい。

replaceWith() を使用するとボタンがうまく変更されますが、新しい HTML を使用して何もできません。まったく応答しません。toggleClass() などを試して、1時間半苦労しましたが、動作しません。締めくくりの方法で私が台無しにしたかもしれない他のことは気にせず、自分でそれを学ぶことを好みます.

乾杯。

<script>
 $(document).ready(function(){
  $(".siteMap").click(function(){
   $("#footer").animate({
      height:  '150px'
      }, 1000);
    $("#table").fadeIn('20000');
    $(".siteMap").replaceWith('<span class="close"><a>CLOSE</a></span>')
   }); // end .click

  $(".close").click(function(){
    $("#footer").css('height', '25px');
    $("#table").fadeOut('20000');
    $(".close").replaceWith('<span class="siteMap"><a>SITE MAP</a></span>');
   }); // end .click
  }); // end .ready
</script>

<div id="footer">
 <div id="table">
  <table width="100%">
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>                    
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>    
   <tr>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
    <td><a href="#">Link One</a></td>
   </tr>
  </table>
 </div>
 <span id="home"><a href="#">HOME</a></span>
 <span id="top"><a href="#banner">TOP</a></span>
 <span class="siteMap"><a>SITE MAP</a></span>
</div>

#table{
    display:    none;
    z-index:    999;
    }

#table  table{
    border: 0;
    }

#table  td{
    border: 0;
    }

#footer{
    padding:    5px;
    height: 25px;
    border: 1px solid   #ff0000;
    border-radius:  20px;
    margin: auto;
    text-align: center;
    background: url('../images/backgroundNavy.jpg') top left;
    background-repeat:  repeat-x;
    }

#footer a{
    text-decoration:    none;
    color:  white;
    font-size:  15px;
    font-family:    proxima;
    font-weight:    bold;
    }
4

4 に答える 4

1

応答しなくなる理由は、クリックイベントを要素に再バインドしないためです。

replaceWithを呼び出した後、クリックをその要素に再バインドする必要があります。

ただし、サイトマップ/閉じるボタンを新しく作成するのではなく、表示/非表示にすることをお勧めします。このアプローチでは、クリックを再バインドする必要はありません。

お役に立てれば！

于 2012-08-23T01:11:45.917 に答える
0

問題は、クラスを使用して要素を作成する前に、JavaScriptが解析されることです.close。これを解決するために、jqueryにはon（）関数が組み込まれています。

$('.close').on('click',function(){
    //your function here
});
于 2012-08-23T01:11:42.447 に答える
0

クリック イベントを関連付ける要素は、イベントをバインドする時点では存在しません。これらのイベントを、次のような存在する要素に委任する必要があります。

$(document).ready(function() {
    $("#footer").on('click', ".siteMap", function() {
        $("#footer").animate({
            height: '150px'
        }, 1000);
        $("#table").fadeIn('20000');
        $(".siteMap").replaceWith('<span class="close"><a>CLOSE</a></span>')
    }); // end .click
    $("#footer").on('click', ".close", function() {
        $("#footer").css('height', '25px');
        $("#table").fadeOut('20000');
        $(".close").replaceWith('<span class="siteMap"><a>SITE MAP</a></span>');
    }); // end .click
}); // end .ready​​

フィドル

on()jQuery 1.7+ でのみ動作します。古いバージョンの場合はdelegate()またはがありlive()ます。

最良の方法は、要素を非表示/表示することであり、次のように常に置き換えるのではありません: FIDDLE

于 2012-08-23T01:10:40.020 に答える
0

問題は、ページの読み込み時に要素にクリック イベント ハンドラーをアタッチしていることです。ただし、ページが最初にロードされたとき、 <span>with クラス「close」はまだ DOM の一部ではありません。これは、後で動的に追加するためです。後で追加すると、イベント ハンドラーがアタッチされていません。

これを回避する 1 つの方法は、JQuery.on()メソッドを使用することです。これは、セレクターに一致するすべての既存の要素と、追加される将来の要素にイベント ハンドラーをアタッチします。 そのためのJQueryドキュメントは次のとおりです。

JavaScript は次のようになります (「siteMap」要素にイベント ハンドラーを追加するときに同じ変更を行う必要があることに注意してください。そうしないと、折りたたまれた後、siteMap を 2 回目に表示できなくなります)。

 $(document).ready(function(){
  $("#footer").on("click", ".siteMap", function(){
   $("#footer").animate({
      height:  '150px'
      }, 1000);
    $("#table").fadeIn('20000');
    $(".siteMap").replaceWith('<span class="close"><a>CLOSE</a></span>')
   }); // end .click

  $("#footer").on("click", ".close", function(){
    $("#footer").css('height', '25px');
    $("#table").fadeOut('20000');
    $(".close").replaceWith('<span class="siteMap"><a>SITE MAP</a></span>');
   }); // end .click
  }); // end .ready​​​​

ただし、このような状況で HTML を変更することは通常、最善の方法ではないという @Ariel のコメントに同意します。

于 2012-08-23T01:11:16.107 に答える