如何为不同的设备创建单独的按钮？

我一直在使用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

如何为不同的设备创建单独的按钮？

回答

相关问题