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中添加带有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'])           
  });
});

使用图像映射上的jQuery从脚本外部访问变量

1 个答案: