Question

我正在使用一些演示代码，其中包含HTML5语言中的各种按钮，如下所示：

<button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" title="Rotate Left">
<button class="btn btn-primary" data-method="rotate" data-option="90" type="button" title="Rotate Right">
<button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">

有一个与此相关联的Javascript文件执行此操作：

$(document).on("click", "[data-method]", function () {
      var data = $(this).data();

      if (data.method) {
        $image.cropper(data.method, data.option);
      }
    });

data- *属性不适用于低于IE10的任何内容。重构此代码的好方法是什么，以便它可以在旧浏览器中工作。

我最初的想法是：

分别将data-method和data-option值移动到id和class属性中。但是，我需要很多if / else语句来执行每个按钮的正确操作。
以某种方式将数据方法和数据选项存储在隐藏变量中。我不知道如何将其链接到按下哪个按钮。
做一些我不知道的事情......（因此在这里寻求帮助）......但可能在一定程度上涉及jQuery。

Answer 1

没有像data.method这样的数据属性这样的方法是错误的。您应该使用$(this).data('method')获取数据，而不是获取$(this).data()

等完整数据

尝试这样使用：

var data = $(this).data('method');
if (data) {
   //....
}

如何重构具有HTML5 data- *属性的输入以在IE9 +中工作

1 个答案: