数据 - 在 IE8 中不起作用

Question

我创建了这段代码来创建动态弹出窗口，但在 IE8 中不起作用。

Can i use 告诉我 IE8 部分支持此功能 -> http://caniuse.com/#search=data-

这是代码：

HTML：

  <div class="popup" data-ride="popup"></div>
  <a href="#" data-popup="open">Abrir</a>
  <a href="#" data-popup="close">Fechar</a>

CSS：

body {
  margin: 0 auto;
}
.popup {
  position: fixed;
  background-color: black;
  opacity: 0.9;
  display: none;
}

JS：

+function ($) {
  'use strict';

  function PopUp(element) {
    this.element = element;
    this.width = '100%';
    this.height = '100%';

    this.setSize();
  }

  PopUp.prototype.setSize = function() {
    var self = this;

    $(self.element).css('width', self.width);
    $(self.element).css('height', self.height);
  };


  var clickHandler = function (e) {
    var element = this;
    var action = $(element).data('popup');

    if (action === 'close') {
      $('.popup').hide();
    } else {
      $('.popup').show();
    }

    e.preventDefault();
  };

  $(document).on('click', '[data-popup]', clickHandler);

  $(window).on('load', function () {
    $('[data-ride="popup"]').each(function () {
      var $popup = $(this);
      $popup = new PopUp($popup);
    });
  });

}(jQuery);

在 IE9+、Firefox 和 Chrome 中可以 100% 运行。

例子：

http://codepen.io/celicoo/pen/yyWqWm

Answer 1

根据 IE 10 - IE 8 的文档，您必须使用 jQuery 的 attr() 函数。

在这条线上，var action = $(element).data('popup');

你需要var action = $(element).attr('data-popup');