0

リンクをクリックすると、div コンテンツがリンクされた div コンテンツになる HTML のスニペットがあります。最初の関数は正常に動作します。jQuery が応答しないように見えるのは、#hidelink の 2 回目のクリックです。ここで何が欠けていますか？

<div id="right">
    <div id='titletext'><p>||||||||||||||</p></div>
    <div id='presentation'></div>

    <div class='hidethisdiv'>
        <div id ="years">
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
        </div>
        <div id='resources'>    
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
            <p><a id='hidelink' href='#years'>&laquo;--back</a></p>
        </div>
    </div>
</div>

<script type="text/javascript">// <![CDATA[
  $('#mainmenu').fadeIn(2000, function() {
    // Animation complete.
  });

$('#presentation').html($('#years').html());

$( function() {
  $("#resourceslink").click(
    function () {
    $('#presentation').html($('#resources').html());
    }
   );

  $("#hidelink").click(
  function (){
    $('#presentation').html($('#years').html());
  }
  );
  //just add more divs like resources and a hidelink for new conferences
});
</script>
4

4 に答える 4

1

以下のように jquery hide and show を使用することもできます。

$("#hidelink").live('click',function () {

$('#resources').hide();

$('#years').show();

});

ブラウザとして firefox を使用している場合は、アドオンである firebug を使用できます。firebug を使用してスクリプトにブレークポイントを設定すると、何が問題なのかがわかります。

これがあなたを助けることを願っています。

于 2012-10-11T18:38:20.200 に答える
1

まず、ID は一意です。一度だけ存在する必要があります。あなたの例では、2 x resourceslink があります。

グループ化する要素が複数ある場合は、クラスを使用します。注意: 要素ごとに複数のクラスを持つことができます! 例えば

<a href="#hey" class="testing hello">heyhey</a>

これを呼び出すことができます

$(".testing") - or - $(".testing.hello")  - or - $(".hello")

このようにイベントリスナーをアタッチします

$(".testing").on("click", function() { 
    doThis();
})
于 2012-10-11T20:01:48.443 に答える
0

表示されたコードでは、id と値の間にスペースがあります ;) また、id は一意であるため、id="resourceslink" を使用することは悪い習慣です :)

于 2012-10-11T18:12:14.010 に答える
0

要素を使用$('#resources').html()すると、html に変換されます。#hidelink後でそれを読みます。問題は、html が解析される前にクリック イベントをバインドすることです。代わりに、イベントは隠し要素にリンクされます。

1 つの解決策は、コンテンツを に追加した後にクリック イベントをリンクすること#presentationです。もう 1 つの問題は#hidelink、html を に追加した後、一意ではなくなること#presentationです。

より良い解決策は、使用しないこと.html()です。すべての要素を に追加し#presentation、 で非表示にしdisplay: noneます。次に、クリックイベントをバインドし、and を使用.show()し.hide()て表示#yearsまたは#resources

例：

<div id="right">
    <div id='presentation'>
        <div id ="years">
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
        </div>
        <div id='resources' style="dislay: none">    
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
            <p><a id='hidelink' href='#years'>&laquo;--back</a></p>
        </div>
    </div>
</div>


$("#resourceslink").click(function () {
    $('#resources').show();
    $('#years').hide();
});

$("#hidelink").click(function () {
    $('#resources').hide();
    $('#years').show();
});
于 2012-10-11T18:12:41.610 に答える