Efficent function replaceWith複数のクラス

Question

このスクリプトの2回目の「クリック」機能は機能しません。単に構文上の問題だと思います。私はこれにはかなり新しいです。しかし、私は単純な方法を見つけるためには、ライブの "クリック"機能を一度varsの配列のために呼び出す必要があります。

スクリプトは機能しますが、2番目の部分は機能しません。

私は効率的なreplaceWithを、異なるクラスの配列に一致させ、それぞれがクラスのリンクに一致し、毎回新しい関数を作成することなく探しています。

どのような提案も素晴らしいでしょう。次のいずれかが可能性があり、事前

<script type="text/javascript"> 

    $(window).load(function(){ 

     $('a.pow').live("click",function(e) { 

      webgl = $('<iframe src="http://s..."> </iframe>'); 
      e.preventDefault();  
      $('#slider-wrapper').replaceWith(webgl); 
     }); 

     $('a.biff').live("click",function(e) { 

      video = $('<iframe src="http://s..."> </iframe>'); 
      e.preventDefault(); 
      $('#slider-wrapper').replaceWith(video);  
     }); 
    }); 

</script> 

HTML

<div id="slider-wrapper"> 
    <div> 
     <a class="pow" href=""> 
     </a> 
    </div> 
    <div> 
     <a class="biff" href=""> 
     </a> 
    </div> 

で

おかげ..

<div> 
     <a class="batman" href=""> 
     </a> 
    </div> 
</div><-- close slider wrapper --> 

Answer 1

あなたは、一般的なクラスの動きをアイフレームをロードするすべてのあなたのアンカーを与えることができますクラスからカスタム属性へのアンカーの説明、カスタム属性に作用するイベントハンドラーeを代わりに使用します。

<div id="slider-wrapper"> 
    <div> 
     <a class="link" href="" data-desc="pow"> 
     </a> 
    <div> 
    <div> 
     <a class="link" href="" data-desc="biff"> 
     </a> 
    <div> 
    <div> 
     <a class="link" href="" data-desc="batman"> 
     </a> 
    <div> 
</div> 

そして、あなたのスクリプトの中で：

<script type="text/javascript"> 

    var desc_url_map = { 
     "pow" : "http://s...", 
     "biff" : "http://s...", 
     "batman" : "http://s..." 
    }; 

    $(window).load(function() { 
     $('a.link').live('click', function(evt) { 
      item = $('<iframe src="' + desc_url_map[this.dataset.desc] + '"></iframe>'); 
      $('#slider-wrapper').replaceWith(item); 
      evt.preventDefault(); 
     }); 
    }); 

</script> 

希望なしバグ:)