トグルスイッチの使用をオンにする

トグルスイッチの位置に基づいてLEDイメージを変更しようとしています。トグルスイッチをオンにすると、redled.jpgに変更したいので、トグルスイッチをクリックしてoffled.jpgに変更したいのですが、このコードを使って作業しています。トグルスイッチの使用をオンにする

私はスイッチをクリックすると

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

は、それがオン/オフのスライドが、それに応じて変更されませんが、私は主導をクリックした場合には、オン/オフ主導切り替わります。

トグルスイッチをクリックしたときにこれが発生するようにしたいと思います。

基本的には、スイッチがクリックされたときにLEDのオン/オフを切り替えることができます。

これに関するお手伝いをさせていただきます。

ありがとうございました。

ありがとうございます。ありがとうございます。

今

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

を試してみてください。入力ボックスにidと両方の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

あなたのご意見ありがとうございますが、私が探しているものではありません。他に誰も提案していないので、私自身でこれを解決しなければならないと思う。ご返信ありがとうございます。 –

トグルスイッチの使用をオンにする

答えて

関連する問題