Question

我有一个非常简单的日历。当点击任何日期时，jQuery对话框将被打开，用户单击一个按钮，对话框关闭，单击的按钮的值将附加到单击的元素，然后所有单击的元素将保存到数组中。

我创建了一个JSBin。

HTML：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    </head>
    <body>
        <a href="#" id="2016-11-01" class="cal_clean_active">Click me</a>
        <div id="dialog"></div>
        <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
         <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
         <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
    </body>
    </html>

JS：

$('.cal_clean_active').click(function(e) {
  var that = $(this); 
  var dates = new Array();

  that.toggleClass('clicked');

  $('#dialog').dialog({
    resizable: false,
    height: "auto",
    width: "auto",
    modal: true,
    buttons: {
      "Vormittags (bis 12:00 Uhr)": function() {
        that.attr('slot','vormittags');
        console.log(that.attr('slot'));
        $(this).dialog('close');
      }
    },
    beforeClose: function() {
      $('.clicked').each(function(i, val) { 
        dates.push(val.id + '|' + val.slot);
      });
        console.log(dates);
    }
  });
});

在Chrome中，所有其他经过测试的浏览器（Firefox，Edge，IE）中的一切都按预期工作（控制台输出为2016-11-01|vormittags），控制台输出为2016-11-01|undefined。任何帮助将不胜感激。

Answer 1

问题是插槽不是元素的标准属性。在大多数浏览器中，它因此不包含在元素的标准属性中（如element.value或element.id）。 Chrome似乎与其他浏览器的处理方式不同。

两个不好的解决方案

解决方案是改变：

dates.push(val.id + '|' + val.slot);

到

dates.push(val.id + '|' + $(val).attr('slot'));`.

另一个 - 普通的javascript - 解决方案可能是使用javascript getAttribute()方法。这可行，因为在jQuery source code自定义属性中使用此行设置：

elem.setAttribute( name, value + "" ); //from the jQuery source code

因此可以用element.getAttribute()读取它们。您的行将如下所示：

dates.push(val.id + '|' + val.getAttribute("slot"));

更好的解决方案

这可能都有效，但它仍然不被认为是好的代码。在您的代码中，属性槽用于存储数据。来自.data() jQuery docs（请参阅this answer）：

存储与指定元素关联的任意数据。返回已设置的值。

相反，<。> $。attr（）用于操纵属性，如id，value或type。解决这个问题的干净方法是：

$('.cal_clean_active').click(function(e) {
  var that = $(this); 
  var dates = new Array();

  that.toggleClass('clicked');

  $('#dialog').dialog({
    resizable: false,
    height: "auto",
    width: "auto",
    modal: true,
    buttons: {
      "Vormittags (bis 12:00 Uhr)": function() {
        that.data('slot','vormittags'); //Not the use of data
        console.log(that.data('slot'));
        $(this).dialog('close');
      }
    },
    beforeClose: function() {
      $('.clicked').each(function(i, val) { 
        dates.push(val.id + '|' + $(val).data("slot")); //Also note it here
      });
        console.log(dates);
    }
  });
});

不同浏览器中不同的jQuery UI行为

1 个答案:

两个不好的解决方案

更好的解决方案