다른 장치에 대해 별도의 단추를 만드는 방법은 무엇입니까?

Question

나는 반응 형 웹 사이트를 만들기 위해 부트 스트랩을 사용 해왔다. 방금 ​​새로운 시나리오를 발견했으며 해결 방법을 모르겠습니다. 나는이 같은라는 두 개의 버튼이 becuase, 그러나 모바일 장치, onclick 이벤트를

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

: 나는 다음과 같은 jQuery를 가지고, 나중에

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

: 나는 다음과 같은 HTML 코드를 해고하지 않는다. 별도의 이벤트 핸들러가있는 두 개의 별도 버튼을 생성하고 싶지는 않습니다 ... 코드가 완전히 동일하기 때문입니다. 이 문제를 해결하려면 어떻게해야합니까?

감사합니다.

Answer 1

장치에 따라 단추를 숨기는 대신 전체 양식을 숨길 수 있습니다. 모바일 용 <input type="search">과 데스크톱 용 스타일 중 하나를 구현하려고 할 때도 동일한 문제가있었습니다. 버튼의 경우에도 하나가보기에 따라 숨겨져 있기 때문에

다음, 버튼 class보다는 id에 이벤트 핸들러를 묶어, 당신은 여전히 페이지 당 id 하나 개의 요소가있을 수 있습니다.

여기에 simple fiddle이 있습니다.