토글 스위치 사용 led 켜기 끄기

토글 스위치 위치에 따라 LED 이미지를 변경하려고합니다. 토글 스위치를 클릭하면 on을 redled.jpg로 변경하고 토글 스위치를 클릭하여 offled.jpg로 변경하려고합니다.이 코드를 사용하여 일종의 작업을 수행합니다 :토글 스위치 사용 led 켜기 끄기

내가 스위치를 클릭하면

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Turn LED On/Off Demo</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.switchButton.css"> 
    <link rel="stylesheet" href="main.css"> 
    </head> 
    <body> 
    <center> 
    <div class="slider demo" id="Led-1"><table><tr><td> 
    <input type="checkbox" value="1"></td> 
    <td><div id="LedTog1"><img src="./images/offled.jpg" width="30px" height="30px" style="margin-left: 15px;"/> 
     <img src="./images/redled.jpg" width="30px" height="30px" style="margin-left: 15px; display:none"/></div> 
    </td></tr> 
    </table> 
</div> 
</center> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
<script src="jquery.switchButton.js"></script> 

<script> 

    $(function() { 

    $("#Led-1.demo input").switchButton({ 
     width: 110, 
     height: 40, 
     button_width: 70 
    }); 

    $("#LedTog1").click(function() { 
     $(this).find('img').toggle(); 
    }); 
    }) 
</script>

그것은 온/오프 슬라이드하지만 그에 따라 변경되지 않습니다하지만 난지도를 클릭하면 그것은 OFF/ON 주도 전환됩니다.

내가 토글 스위치를 클릭했을 때 이런 일이 발생하기를 원합니다.

그래서 기본적으로 스위치를 클릭했을 때 LED 이미지를 켜거나 끌 수 있기를 원합니다.

이 문제에 대한 도움을 주시면 감사하겠습니다.

감사합니다.

감사합니다. 그냥 내가하고 싶은 것을 명확히 : 나는 스위치가 을 주도 클릭하면

Top image is OFF - Bottom is ON이 지금은 작동되는 방식이 아니다 변화에 에 또는 OFF하지만을 않을 난을 클릭하면 자체적으로 켜지거나 꺼질 것입니다.

가능한 경우 위 이미지에 표시된 형식을 유지하고 싶습니다.

다시 한번 감사드립니다.

출처

2016-09-03 Omar Sabu

는이

<input type="checkbox" value="1" id="testClick">//Give id to this input 

<script> 
$("#testClick").click(function() { 

    $("img").toggle(); 
    }); 
</script>

출처

2016-09-03 05:15:19 Maheshvirus

에 ID를 추가 할 수 있습니까? 코드에서 무엇이 잘못되었으며 어떻게 고쳐 졌는지 설명하십시오. – Barmar

이 코드를 시도하십시오보십시오. 왜이 시도해야 당신은 입력 상자 두 img 태그

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Turn LED On/Off Demo</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="jquery.switchButton.css"> 
     <link rel="stylesheet" href="main.css"> 
     </head> 
     <body> 
     <center> 
     <div class="slider demo" id="Led-1"><table><tr><td> 
     <input type="checkbox" id="checkbox" value="1"></td> 
     <td><div id="LedTog1"> 
      <img src="./images/offled.jpg" id="offled" width="30px" height="30px" style="margin-left: 15px;"/> 
      <img src="./images/redled.jpg" id="redled" width="30px" height="30px" style="margin-left: 15px; display:none;"/></div> 
     </td></tr> 
     </table> 
    </div> 
    </center> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 

    <script> 

     $(function() { 
     $("#checkbox").click(function() { 

      if($(this).is(':checked')){ 
       $('#offled').hide(); 
       $('#redled').show(); 
       } 
      else{ 
       $('#redled').hide(); 
       $('#offled').show(); 
       } 
     }); 
     }) 
    </script>

출처

2016-09-03 05:17:28 Afzal

그는 이것을 왜 시도해야합니까? 코드에서 무엇이 잘못되었으며 어떻게 고쳐 졌는지 설명하십시오. – Barmar

입력 해 주셔서 감사합니다.하지만 제가 찾고있는 것이 아닙니다. 아무도 제안을 해 본적이 없기 때문에 스스로 해결해야 할 것 같습니다. 답장을 보내 주셔서 다시 한 번 감사드립니다. –

토글 스위치 사용 led 켜기 끄기

답변

관련 문제