Question

我正在尝试根据切换开关位置更改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。

我希望在单击切换开关而不是LED时发生这种情况。

所以基本上我希望能够在点击开关而不是LED图像本身时打开或关闭LED。

非常感谢任何帮助。

感谢。

谢谢大家的建议。只是为了澄清我想做的事情：

Top image is OFF - Bottom is ON

现在它的工作方式是当我点击开关时，led 不更改为 ON或OFF 但是当我点击LED本身时它会打开或者关闭。

如果可能的话，我想保留上面图片中显示的格式。

再次感谢。

Answer 1

试试这个

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

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

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

Answer 2

请尝试此代码。您可以在输入框中添加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>

使用拨动开关关闭LED

2 个答案: