イメージマップ上でjQueryを使用してスクリプトの外部から変数にアクセスする

Question

現在、私は配列についての頭を抱いて、それらをjQueryでどのように利用しようとしています。

私はイメージマップを持っており、jQueryを使ってイメージマップHTMLにデータを入力するためにいくつかの配列を作成したいと思います。

私は苦労してる

$(document).ready(function() { 
$('map > area.fancybox').click(function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    var title = $(this).attr('title'); 
    var type = $(this).attr('rel'); 
    $.fancybox({ 
     'title': title, 
     'titlePosition': 'inside', 
     'href' : url, 
     'type' : type, 
      closeBtn : true, 
    maxWidth : 467, 
    maxHeight : 609, 
    fitToView : false, 
    padding : '5', 
    openEffect : 'none', 
    closeEffect : 'none' 
    }); 
    $('.fancybox').attr('title', altTitle); 
}); 

    var slideTitles = [ "Title 0", 
         "Title 1", 
         "Title 2" 
        ]; 

    var altTitle = [ "This is ALT tag 0", 
         "This is ALT tag 1", 
         "This is ALT tag 2" 
        ]; 
}); 

は

... HTML（特にGoogle Analyticsのトラッキングイベント）でスクリプトの外の配列にアクセスする方法である：ここでは

は私が試みられてきたものです

HTML：

<img src="test.jpg" width="800" height="480" border="0" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area shape="rect" coords="59,132,227,367" href="test1.htm" class="fancybox" rel="iframe" onClick="_gaq.push(['_trackEvent', slideTitles, altTitle, 'testing action']);" /> 
    <area shape="rect" coords="304,108,483,382" href="test2.htm" class="fancybox" rel="iframe" onClick="_gaq.push(['_trackEvent', slideTitles, altTitle, 'testing action']);" /> 
    <area shape="rect" coords="514,46,747,441" href="test3.htm" class="fancybox" rel="iframe" onClick="_gaq.push(['_trackEvent', slideTitles, altTitle, 'testing action']);" /> 
</map> 

Answer 1

最も簡単な方法は、変数をグローバルにすることです。それは良いデザインではない、私はパブリックメソッドを使用して、配列にアクセスするモジュールパターンがよりクリーンだと思います。

$(document).ready(function() { 
    $('map > area.fancybox').click(function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     var title = $(this).attr('title'); 
     var type = $(this).attr('rel'); 
     $.fancybox({ 
      'title': title, 
      'titlePosition': 'inside', 
      'href' : url, 
      'type' : type, 
      closeBtn : true, 
      maxWidth : 467, 
      maxHeight : 609, 
      fitToView : false, 
      padding : '5', 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 
     $('.fancybox').attr('title', altTitle); 
    }); 

    // Marking global variables with window.globalName is clearer 
    // than just not using var 
    window.slideTitles = ["Title 0","Title 1","Title 2"];  
    window.altTitle = ["This is ALT tag 0", "This is ALT tag 1", "This is ALT tag 2"]; 
}); 

<img src="test.jpg" width="800" height="480" border="0" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area shape="rect" coords="59,132,227,367" href="test1.htm" class="fancybox" rel="iframe" onClick="_gaq.push(['_trackEvent', window.slideTitles, window.altTitle, 'testing action']);" /> 
    <area shape="rect" coords="304,108,483,382" href="test2.htm" class="fancybox" rel="iframe" onClick="_gaq.push(['_trackEvent', window.slideTitles, window.altTitle, 'testing action']);" /> 
    <area shape="rect" coords="514,46,747,441" href="test3.htm" class="fancybox" rel="iframe" onClick="_gaq.push(['_trackEvent', window.slideTitles, window.altTitle, 'testing action']);" /> 
</map> 

よりよい解決策は、これは配列を必要とする唯一の場所である場合はHTML

$(document).ready(function() { 
    var slideTitles = ["Title 0","Title 1","Title 2"];  
    var altTitle = ["This is ALT tag 0", "This is ALT tag 1","This is ALT tag 2"]; 
    $('map > area.fancybox').click(function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     var title = $(this).attr('title'); 
     var type = $(this).attr('rel'); 
     $.fancybox({ 
      'title': title, 
      'titlePosition': 'inside', 
      'href' : url, 
      'type' : type, 
      closeBtn : true, 
      maxWidth : 467, 
      maxHeight : 609, 
      fitToView : false, 
      padding : '5', 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 
     $('.fancybox').attr('title', altTitle); 

     // This reads the attribute "data-index" from the html 
     // This requires that your HTML know about your JS array, which is tight coupling 
     // Another approach would be to store the title and alt text in the HTML 
     // and just retrieve them here. If you need them in more places, you're probably 
     // better off using the array 
     var index = $(this).data("index"); 
     // Do what you need here instead of with inline handlers 
     _gaq.push(['_trackEvent', slideTitles[index], altTitle[index], 'testing action'])   
    }); 
}); 

にjQueryを使ってハンドラの代わりに、インラインスクリプトを追加することです私は次のことをするでしょう

<img src="test.jpg" width="800" height="480" border="0" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area shape="rect" coords="59,132,227,367" href="test1.htm" class="fancybox" rel="iframe" data-title="Title 1" data-alt="Alt 1"/> 
    <area shape="rect" coords="304,108,483,382" href="test2.htm" class="fancybox" rel="iframe" data-title="Title 2" data-alt="Alt 2"/> 
    <area shape="rect" coords="514,46,747,441" href="test3.htm" class="fancybox" rel="iframe" data-title="Title 3" data-alt="Alt 2" /> 
</map> 

$(document).ready(function() { 
    $('map > area.fancybox').click(function(e) { 
     e.preventDefault(); 
     var $this = $(this); // it's wasteful to keep calling $(this) 
     $.fancybox({ 
      title: title, 
      titlePosition: 'inside', 
      href : $this.attr('href'), 
      type : type, 
      closeBtn : true, 
      maxWidth : 467, 
      maxHeight : 609, 
      fitToView : false, 
      padding : '5', 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 
     $('.fancybox').attr('title', $this.data('alt')); 
     _gaq.push(['_trackEvent', $this.data('title'), $this.data('alt'), 'testing action'])   
    }); 
});