jquery - 在图像映射上使用 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

最简单的方法是使您的变量全局化。并不是说它是好的设计，我认为使用公共(public)方法访问数组的模块模式更干净。

$(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 中使用 jQuery 而不是内联脚本添加处理程序

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