在 JQuery 中动态更改 img src 属性

达罗125

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

我将按钮的值发送到 try.php。根据点击的按钮,我在 try.php 文件中得到一个变量,对于 ON 按钮 - 1 ,对于 OFF 按钮 - 0(变量$curl_response)。是否可以根据从 try.php 页面收到的变量动态更改 index.php 文件中的 img?例如,如果接收到的变量是1,src = "bulb.png",如果是0,那么src = "bulb2.png"?

尝试.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);
?>

编辑:

<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>
大卫

看看success你传递给选项$.ajax如果 https 请求状态为 200,您可以在此处提供要运行的回调函数。类似

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

有关更多信息,请参阅http://api.jquery.com/jQuery.ajax/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在循环中更改img src属性值-jQuery

来自分类Dev

动态设置img的src属性

来自分类Dev

如何使用 jquery/javascript 在图像标签 <img src=""> 的 src 属性中传递字符串?

来自分类Dev

jQuery:根据下拉选择的值动态更改img src

来自分类Dev

如何使用<img src =“”>中的属性?

来自分类Dev

jQuery如何更改img src路径onclick?

来自分类Dev

根据img src更改后台JQuery

来自分类Dev

单击 jquery 时更改 img src

来自分类Dev

对于动态生成的img src,“元素img上的属性src的错误值:必须为非空”

来自分类Dev

img更改src属性时css的最高值更改

来自分类Dev

无法在 Javascript 中更改 img 的 src(无法将属性“src”设置为 null)

来自分类Dev

具有更改的img src属性的幻灯片

来自分类Dev

在 JS/PHP 悬停时更改 img src 属性

来自分类Dev

jQuery-单击更改img src,如果单击不同的img或块,则返回旧的src

来自分类Dev

用户可以在<img> src属性中执行哪些恶意操作?

来自分类Dev

捕获HTML值并将其放置在img src属性中

来自分类Dev

用jQuery更改src video属性

来自分类Dev

更改img单击img上的img src

来自分类Dev

如何将img src属性绑定到vue.js中的动态URL

来自分类Dev

将属性从data-src更改为src,无需jQuery

来自分类Dev

通过jQuery更改img src:图片不会刷新

来自分类Dev

使用jquery / php / html使用fileupload值更改img src

来自分类Dev

jQuery / Javascript使用IF / ELSE语句更改img SRC

来自分类Dev

如何在jQuery中更改视频src属性值?

来自分类Dev

在jQuery中通过alt属性定位<img>

来自分类Dev

使用jQuery修改img src

来自分类Dev

如何在href jquery中获取img src

来自分类Dev

如何使用Jquery从图像库中检索img src

来自分类Dev

动态分配img的src

Related 相关文章

热门标签

归档