如何爲不同的設備創建單獨的按鈕？

我一直在使用bootstrap來創建一個響應式網站。我剛剛遇到一個新的場景，我不知道如何解決它。我有以下的html代碼：如何爲不同的設備創建單獨的按鈕？

 <!-- button color depending on desktop vs. phone --> 
     <button class="btn visible-desktop" id="modifyVLANS">Modify VLANS</button> 
     <button class="btn hidden-desktop lsm-visible-phone btn-warning" id="modifyVLANS">Modify VLANS</button>

後來，我有以下的jQuery：

//show list 
    $('#modifyVLANS').click(function() { 
      do something....

然而，監守我有一個名爲相同的兩個按鈕，在移動設備上，onclick事件不開火。我不想用獨立的事件處理程序創建兩個單獨的按鈕......因爲代碼將完全相同。我該如何解決這個問題？

謝謝。

來源

2013-03-27 dot

您可以使用媒體查詢 – 2013-03-27 18:04:40

我已經在使用內置媒體查詢..您會注意到類似「隱藏桌面」「可見桌面」等。 – dot 2013-03-27 18:07:12

您正在使用id來選擇元素。 '$（'＃modifyVLANS'）'選擇具有該id的第一個元素，並忽略其餘元素。你的意思是每頁有一個id，所以這是一個可以理解的行爲。您可以使用類屬性來代替使用ID。 - > http://jsfiddle.net/NLzHW/1/ – banzomaikaka 2013-03-27 18:11:36

取代隱藏按鈕取決於設備，我會隱藏整個表單。嘗試爲移動設備實現一種<input type="search">款式時，我遇到了同樣的問題，而另一款設備則用於桌面設備。

然後，配合你的事件處理程序的按鈕class而非id，因爲即使其中一個按鈕被隱藏取決於視圖中，可以仍然只有與id每頁的一個元素。

這是simple fiddle。

來源

2013-03-27 18:12:16 adamdehaven

我剛剛發佈，我找到了解決方案。我更改了點擊事件來檢查課程。非常感謝！ – dot 2013-03-27 18:15:10

如何爲不同的設備創建單獨的按鈕？

回答

相關問題