0

コンテンツを div にロードしようとしてから、クリックすると、div にあった以前のコンテンツが再度ロードされます。

これは私がこれまでに持っているコードです:

$(document).ready(function(){
   var mainClone = null;
   $('.project').click(function(e){
      var link = $(this).attr('rel');
      event.preventDefault();
      var mainClone = $('#main').clone();
      $('#main').load(link);
   });      

  $('.back').click(function(e){
  event.preventDefault();
  $('#main').load('mainClone *');
  });
});

私は何を間違っていますか？これは私を夢中にさせています！

補足として、これは私の問題に対する良い解決策ですか？http://www.revolver-studio.com/の作業セクションに似たものを達成しようとしてい ます。親指をクリックすると詳細情報が表示され、もう一度クリックして親指に戻ります。どんな助けでも本当に感謝しています。みんなありがとう！

4

3 に答える 3

1

divを保存して非表示にする方がよい場合があります。この例では、それらは「キャッシュ」されており、追加のロードを必要としません（テストされていません）

$(document).ready(function(){
    $('.project[rel]').click(function(){
        var href = $(this).attr('rel');
        var $target = $('#main .pane[rel=' + href + ']');
        if ($target.length == 0) {
            $target = $('<div class="pane" rel="' + href + '">Loading...</div>').appendTo('#main').hide().load(href);
        }
        $('#main .pane').hide();
        $target.show()
        return false;
    });
});​

HTTP /接続エラーを適切に処理できるため、$.ajax()代わりにこのメソッドを使用することをお勧めします。$.fn.load()

また、rel=""属性には期待値のリストを含む特定の目的があるため、このように属性を使用することは一般的にはお勧めできませんhttp://www.w3schools.com/html5/att_a_rel.asp

HTML5では、新しいデータ属性を使用することをお勧めしますdata-href=""。John Resigには、このhttp://ejohn.org/blog/html-5-data-attributes/に関する優れた記事があります。

于 2012-06-17T02:54:29.950 に答える
1

いくつかの問題。

1 つ目は、var mainCloneプロジェクト クリック ハンドラ内での 2 つ目の使用法です。これは、という名前の新しい変数を宣言しており、宣言しmainCloneた元の変数と同じではありません。新しいものは、それが宣言されている関数内にのみスコープを持つため、元のよりグローバルなものは決して変更されません。

次の問題load()は、保存されている html で html を置き換えたい場合に使用します。やりたいことには不適切であり、引数は単に無効な文字列です。

$(document).ready(function(){
   var mainClone = null;
   $('.project').click(function(e){
      var link = $(this).attr('rel');
      event.preventDefault();
      /*var mainClone = $('#main').clone();*/ 
      mainClone = $('#main').html();// now will update var declared above and only get the html within the element
      $('#main').load(link);
   });      

  $('.back').click(function(e){
  event.preventDefault();
  if( mainClone ){ // make sure it's not null still
    $('#main').html( mainClone);
  }
  });
});

全体的に、このコードはまだ少し弱いですが、SO がアプリを作成する意図はありません。それはあなたを始めるはずです

于 2012-06-17T02:27:15.137 に答える
0 
$('#main').load('mainClone *');

これは、構文と関数の使用法が正しくありません。html()外部ファイルを呼び出していないので、やなどのDOMマニピュレータを使用する必要がありますが、そうではありappendToませんload()

$('#main').html(mainClone);

Jsfiddle: http://jsfiddle.net/92h75/1/

于 2012-06-17T02:28:30.087 に答える