Javascript 在JQuery中动态更改img src属性_Javascript_Php_Jquery_Curl

Javascript 在JQuery中动态更改img src属性

javascript php jquery curl

Javascript 在JQuery中动态更改img src属性,javascript,php,jquery,curl,Javascript,Php,Jquery,Curl,我有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() {

我有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>

编辑：


$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
var val=$（this.val（）；
$.ajax({
url:“try.php”，
类型：“POST”，
数据：{'myVar'：val}
成功：功能（结果）{
开关（结果）{
案例“0”：
$（.bull”）.attr（“src”、“bull.png”）；
打破
案例“1”：
$（“.bull”）.attr（“src”、“bulb2.png”）；
打破
}
}
});
});
});

是的，您可以在AJAX

success

上使用它：

$.ajax({
...
success: function(result){
      switch(result){
         case "1":
           $("#yourImage").attr("src", "yourImagePath1.jpg");
           break;
         case "2":
           $("#yourImage").attr("src", "yourSecondImagePath.jpg");
           break;          
      }
   }
});

编辑/建议

如果按钮要调用相同的URL并传递相同的结构数据，则不需要为每个按钮触发两个单独的事件。使用相同的类来触发：

HTML

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

查看传递给

$.ajax

的

success

选项。如果https请求状态为200，则提供要运行的回调函数。差不多

$.ajax({
    /** your other stuff, and... */
    success : function(data) {
        if (data == 1) {
            $('button.on').attr({src : "bulb.png"})
        }
        // and so on
    }
});

有关更多信息，请参阅。

是您可以根据ajax成功方法中收到的标记添加if-else条件，并使用JavaScript更新img src属性。

单击其中一个按钮时，您可以发送ajax请求并处理响应，如下所示：

<script type="text/javascript">
        $(document).ready(function () {
            $('.on, .off').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>


$（文档）.ready（函数（）{
$（'.on，.off'）。单击（函数（）{
var val=$（this.val（）；
$.ajax({
url:“try.php”，
类型：“POST”，
数据：{'myVar'：val}，
成功：功能（结果）{
开关（结果）{
案例“0”：
$（.bull”）.attr（“src”、“bull.png”）；
打破
案例“1”：
$（“.bull”）.attr（“src”、“bulb2.png”）；
打破
}
}
});
});
});

当然可以。您的PHP代码将在响应中发出值，然后您的AJAX代码将有

success

或

done

处理程序来检查响应并在页面上执行操作。这是一个很好的建议，谢谢。我已经更正了我的代码（look EDIT），但现在当我按下按钮时，什么都没有发生，甚至try.php文件也没有打开。你是否在两个按钮中都添加了类

btn

？在你的代码中，数据结构后缺少一个

，

（逗号），可能是这样？我不知道。。控制台是否显示任何错误？尝试在success函数中添加一个

警报（结果）

。好的，它缺少一个逗号。我发出了警报，它工作了，但按下按钮后照片没有变化。你确定成功中的

结果返回正确吗？（将alert（）
放在开关的框上，因为更改图像src
的代码实际上是$（“#image”）.attr（“src”，“filepath.jpg”）不幸的是，当我按下buttons@Daro125我已经编辑了我的答案。你能再查一下吗？如果查看浏览器开发工具的“网络”选项卡，是否看到正在发送的请求？是否有任何错误？在代码中，在“data:{'myVar'：val}”之后必须是逗号。但它仍然不起作用。我检查了网络选项卡，请求正在发送。一切看起来都很好，但这幅画不好change@Daro125对不起，我已经粘贴了你编辑的代码并更改了，没有注意到你在那里漏掉了一个逗号。。。您在“网络”选项卡中得到的答案是什么？答案是0或1。我使用了@David代码，它可以工作，我不知道为什么开关不能工作
$(".buttonClass").click(function(){
     var val = $(this).text();

     //make here your ajax call passing 'val' 
});

$.ajax({
    /** your other stuff, and... */
    success : function(data) {
        if (data == 1) {
            $('button.on').attr({src : "bulb.png"})
        }
        // and so on
    }
});

<script type="text/javascript">
        $(document).ready(function () {
            $('.on, .off').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>