1

这是上下文 - 我正在尝试创建一个自适应设计，其中选择框显示为 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 取出数据角色位，因为我希望选择显示为更漂亮的 jQuery Mobile 选择。但是，这并没有发生，并且 removeData 没有做任何事情。我做错了什么？

4

2 回答 2

3

根据 jQuery 文档.removeData()

.removeData() 方法允许我们删除之前使用 .data() 设置的值。当使用键名调用时， .removeData() 删除该特定值；当不带参数调用时，所有值都被删除。从 jQuery 的内部 .data() 缓存中删除数据不会影响文档中的任何 HTML5 数据属性；使用 .removeAttr() 删除那些。

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

于 2012-12-18T17:24:49.533 回答
1

我想到了！关键是不需要删除 data-role = 'none' 属性。它仅用于告诉 jQuery 不要尝试对相关元素进行任何升级。但是，如果你然后做类似的事情

$('.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();
}​
于 2012-12-18T17:49:10.837 回答