jQuery removeData行爲

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> 

的

​​3210

位是至關重要的。沒有它，你最終會在小屏幕上顯示兩個控件 - 一次是原始選擇，然後是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也沒有做到這一點。我做錯了什麼？

Answer 1

我想通了！重點是不需要刪除data-role ='none'屬性。它僅用於告訴jQuery不要嘗試對所討論的元素進行任何變形。但是，如果你再這樣做

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

你explcitly的.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(); 
}​ 

Answer 2

根據jQuery的文檔.removeData()

的.removeData（）方法允許我們使用。數據以刪除以前設置的值（）。當用密鑰名稱調用時，.removeData（）會刪除該特定值;當沒有參數被調用時，所有的值都被刪除。從jQuery的內部.data（）緩存中刪除數據不會影響文檔中的任何HTML5數據屬性;使用.removeAttr（）刪除這些。

它看起來像您使用的是HTML5數據屬性文件中..所以使用.removeAttr('data-role')代替