jQuery removeData行为

这里是上下文-我试图创建一个自适应设计，其中选择框在大屏幕上显示为jQuery Mobile选择，在小屏幕上显示为MobiScroll选择。HTML中最初的select是这样写的

<select data-mini='true' data-inline='true' class='variants' data-role='none' style='display:none'>
  <option value='1'>Small</option>
  <option value='2'>Medium</option>
  <option value='3'>Large</option>
</select>

比特是至关重要的。如果没有它，你会在小屏幕上看到两个控件——一个是原始的select，另一个是mobiscroll样式的select。这在MobiScroll文档中没有得到很好的解释

在我的document.ready代码中，我按照

if (600 > $(window).width()) {
    $('.variants').scroller({
        preset: 'select',
        theme: 'android-
      ics',
        rows: 1,
        mode: 'scroller',
        display: 'inline',
        inputClass: 'i-txt',
        showLabel: false,
        width: 40,
        height: 20
    });
} else {
    $('.variants').css('display', 'inline-block').removeData('role');
}​

---

在这个位置上，一个未设置样式的浏览器选择框将显示在大屏幕上。我试图通过removeData删除数据角色位，因为我希望select显示为jquerymobileselect，这要漂亮得多。然而，这并没有发生，removeData也没有做任何事情。我做错了什么？

根据jQuery文档

.removeData（）方法允许我们删除以前使用.data（）设置的值。当使用键名调用时，.removeData（）删除该特定值；在没有参数的情况下调用时，将删除所有值。从jQuery的内部.data（）缓存中删除数据不会影响文档中的任何HTML5数据属性；使用.removeAttr（）删除这些

---

看起来您正在文档中使用HTML5数据属性。。因此，根据jQuery文档，使用

.removeAttr（'data-role'）

代替

.removeData（）方法允许我们删除以前使用.data（）设置的值。当使用键名调用时，.removeData（）删除该特定值；在没有参数的情况下调用时，将删除所有值。从jQuery的内部.data（）缓存中删除数据不会影响文档中的任何HTML5数据属性；使用.removeAttr（）删除这些

---

看起来您正在文档中使用HTML5数据属性。。所以用

.removeAttr（'data-role'）

来代替我明白了！关键是不需要删除data role='none'属性。它只用于告诉jQuery不要尝试对所讨论的元素进行任何升级。然而，如果你这样做

$('.variants').css('display', 'inline-block').selectmenu()

您正在明确地将.variants系列选择转换为jQuery Mobile选择菜单，因此数据角色属性根本不会进入图片中。修改后的代码实现了我想要的功能

if (600 > $(window).width()) {
$('.variants').scroller({
    preset: 'select',
    theme: 'android-
  ics',
    rows: 1,
    mode: 'scroller',
    display: 'inline',
    inputClass: 'i-txt',
    showLabel: false,
    width: 40,
    height: 20
});
} else {
$('.variants').css('display', 'inline-block').selectmenu();
}​

---

我知道了！关键是不需要删除data role='none'属性。它只用于告诉jQuery不要尝试对所讨论的元素进行任何升级。然而，如果你这样做

$('.variants').css('display', 'inline-block').selectmenu()

您正在明确地将.variants系列选择转换为jQuery Mobile选择菜单，因此数据角色属性根本不会进入图片中。修改后的代码实现了我想要的功能

if (600 > $(window).width()) {
$('.variants').scroller({
    preset: 'select',
    theme: 'android-
  ics',
    rows: 1,
    mode: 'scroller',
    display: 'inline',
    inputClass: 'i-txt',
    showLabel: false,
    width: 40,
    height: 20
});
} else {
$('.variants').css('display', 'inline-block').selectmenu();
}​

---

感谢您提供有关removeData的信息。即使removeAttr能够工作，它也必须是removeAttr（“数据角色”），因为这是所讨论的属性的名称。然而，这并没有改变任何事情——选择在大屏幕上仍然显示为非样式。点击查看removeData上的信息。即使removeAttr能够工作，它也必须是removeAttr（“数据角色”），因为这是所讨论的属性的名称。然而，它并没有改变任何事情——选择在大屏幕上仍然显示为未设置样式