我正在努力使用 attr 更改图像 src答案

【问题标题】：I am struggling to change imag src using attr我正在努力使用 attr 更改图像 src
【发布时间】：2022-08-14 21:51:17
【问题描述】：

我是 JQuery 的新手，我有一个简单的脚本不起作用，我不知道为什么。我想使用 attr() 更改图像。我试过把脚本放在头部分，但没有用。我已将两个图像放在同一个根文件中，但仍然无法正常工作。我究竟做错了什么？

    <!doctype html>
    <html lang=\"en\">
    <head>
    <title>Testing JQuery</title>
    


    <link rel=\"stylesheet\"  href=\"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css\" />

    <script src=\"https://code.jquery.com/jquery-1.11.1.min.js\"></script>

    <script src=\"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js\"></script>
    
    </head>
    <body>

    <img src=\"20220801_021439_mfnr.jpg\" 
      alt=\"my swollen feet\" 
      heigth=\"500px\" width=\"300px\" 
      id=\"#myFeet\">
     
    <script type=\"text/javascript\">

     $(document).ready(function(){
       
   $(\"#myPic\").attr(\"src\",\"IMG-20201105-WA0000.jpg\");
      });

   </script>
    </body>

我还尝试过使用 attr() 的其他 JQuery 指令，这些指令也不起作用，但其他所有指令都可以。

你用 id #myPic 调用它，但你的 pic 有 id #myFeet。
是的，但他也是 id 属性中的#。但是# 仅在 js 中使用，因此 jquery 理解以下字符串是一个 id。这与类相同，它们由 ` `（空格）分隔，但在编写选择器时，您在前面放置一个 .（点）。

标签： javascript jquery

【解决方案1】：

您可以使用 .attr() 函数来设置给定 DOM 元素的属性：

$('#id').attr('src', 'newImage.jpg');

更改图像源

在你的情况下

<!doctype html>
    <html lang="en">
    <head>
    <title>Testing JQuery</title>
    


    <link rel="stylesheet"  href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
    </head>
    <body>

    <img src="20220801_021439_mfnr.jpg" 
      alt="my swollen feet" 
      heigth="500px" width="300px" 
      id="myFeet">
     
    <script type="text/javascript">

     $(document).ready(function(){
       
   $("#myFeet").attr("src","IMG-20201105-WA0000.jpg");
      });

   </script>
    </body>

【讨论】：

谢谢你的建议。我刚刚尝试过，它仍然没有改变最初的画面。

【解决方案2】：

您的 jQuery 选择器 #myPic 和 id="#myFeet" 不匹配。此外，您不要在id 属性中的id 前面放置#。 # 仅用于css 和js。

id="#myPic"

应该只是

id="myPic"

【讨论】：

谢谢，我很抱歉。我是一样的，当我发布这个问题时我犯了一个错误。最初我想使用一个示例，但我决定粘贴实际代码，但忘记更改示例中的“#myPic”。我只是试图将#从id删除到$（“myFeet”），但图片仍然没有改变。

【解决方案3】：

ID 必须相同并且 id 必须定义为 id="myPic" 而不是 id="#myPic" 并且 id 是错误的。

<!doctype html>
    <html lang="en">
    <head>
    <title>Testing JQuery</title>
        <link rel="stylesheet"  href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
    </head>
    <body>

    <img src="20220801_021439_mfnr.jpg" 
      alt="my swollen feet" 
      heigth="500px" width="300px" 
      id="myPic">
     
    <script type="text/javascript">

     $(document).ready(function(){
       
   $("#myPic").attr("src","IMG-20201105-WA0000.jpg");
      });

   </script>
    </body>

【讨论】：

感谢您的建议和我的歉意。我是一样的，当我发布这个问题时我犯了一个错误。最初我想使用一个示例，但我决定粘贴实际代码，但忘记更改示例中的“#myPic”。