Доступ к переменной извне скрипта с помощью jQuery на карте изображений

Question

Сейчас я пытаюсь разобраться с массивами и узнать, как их использовать с jQuery.

У меня есть карта изображений, и я хочу создать несколько массивов для ввода данных в HTML-код карты изображений с помощью jQuery.

Вот что я пытался:

$(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>

Лучшим решением было бы добавить обработчики с помощью jQuery вместо встроенного скрипта в 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'])           
  });
});

Если это единственное место, где нужен массив, я бы сделал следующее

<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'])           
  });
});