с помощью тумблера Turn Turn led off off

Я пытаюсь изменить изображение водить на основе положения тумблера. Когда я нажимаю переключатель тумблера на дюйм, я хочу, чтобы он изменился на redled.jpg, и когда я нажимаю переключатель sweg to off, я хочу изменить его на offled.jpg Я вроде как его работаю, используя этот код:с помощью тумблера Turn Turn led off off

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

Если я нажимаю на переключатель скользит вкл/выкл, но не изменяет соответствующим образом, но если я нажимаю водить будет переключать светодиод вкл/выкл.

Я хочу, чтобы это произошло, когда я нажимаю тумблер, а не светодиод.

Так что в основном я хочу, чтобы включить или выключить светодиод, когда переключатель щелкнул не сам светодиод.

Любая помощь на это очень ценится.

Спасибо.

Благодарим вас за предложения. Просто чтобы прояснить, что я хочу сделать:

Top image is OFF - Bottom is ON

Прямо сейчас, как она работает, когда я нажимаю выключатель водить не изменения в 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

Зачем ему это делать? Объясните, что было не так в его коде и как вы его исправили. – 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

Спасибо за ваш вклад, но это не то, что я ищу. Думаю, мне придется это проработать самостоятельно, так как у кого-то нет никаких предложений. Еще раз спасибо за ваш ответ. –

с помощью тумблера Turn Turn led off off

ответ

Смежные вопросы