Question

以下是上下文 - 我正在尝试创建一个自适应设计，其中选择框显示为jQuery Mobile在大屏幕上选择并且MobiScroll在小屏幕上选择。 HTML中的原始选择是这样写的

<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>

style='display:none'

位很关键。如果没有它，你最终会在小屏幕上显示两个控件 - 一次是原始选择，然后是mobiscroll样式选择。这在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显示为jQuery Mobile选择，这是一个非常漂亮。但是，这没有发生，removeData没有做任何事情。我做错了什么？

Answer 1

根据jQuery文档.removeData()

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

看起来您正在使用文档中的HTML5数据属性..所以请改用.removeAttr('data-role')

Answer 2

我明白了！关键是没有必要删除data-role ='none'属性。它只是为了告诉jQuery不要在有问题的元素上尝试任何upstyling。但是，如果你那么做

之类的事情

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

您将.variants系列选项显式转换为jQuery Mobile选择菜单，因此data-role属性根本不会进入图片。修改后的代码，我做的就是

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();
}

jQuery removeData行为

2 个答案: