dongliao3742
2017-12-14 17:43
浏览 336
已采纳

在JQuery中动态更改img src属性

I have index.php:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.on').click(function() {
                var val = $(this).val();
                $.ajax({
                    url: "try.php",
                    type: "POST",
                    data: {'myVar': val}
                });
             });
            $('.off').click(function() {
                var val = $(this).val();
                $.ajax({
                    url: "try.php",
                    type: "POST",
                    data: {'myVar': val}
                });
            });
        });
    </script>  

<body>
    <img class="bulb"  src="bulb.png" alt="...">

    <button class="on" value="http://pageon.org">On</button>
    <button class="off" value="http://pageoff.org">Off</button>
</body>

I send value of buttons to try.php. Depending on the clicked button, I get one variable in the try.php file, for the ON button - 1 , for the OFF button - 0 (variable $curl_response). Is it possible to change the img in the index.php file dynamically, depending on the received variable from the try.php page? For example, if the received variable is 1, src = "bulb.png", and if 0, then src = "bulb2.png"?

try.php :

<?php
$name = $_POST['myVar'];
    $service_url = $name;
    $curl = curl_init($service_url);

    // Ustaw opcje połączenia
    curl_setopt($curl, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4 );
    //curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    $curl_response = curl_exec($curl);
    curl_close($curl);
?>

EDIT:

<script type="text/javascript">
        $(document).ready(function () {
            $('.btn').click(function() {
                var val = $(this).val();
                $.ajax({
                    url: "try.php",
                    type: "POST",
                    data: {'myVar': val}
success: function(result){
      switch(result){
         case "0":
           $(".bulb").attr("src", "bulb.png");
           break;
         case "1":
           $(".bulb").attr("src", "bulb2.png");
           break;          
      }
   }
      });
            });
        });
    </script>
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

4条回答 默认 最新

相关推荐 更多相似问题