使用JQuery动态更改图像

本文关键字：图像 动态 JQuery 使用 | 更新日期: 2023-09-27 18:11:35

顺便说一下，我是JQuery新手!html页面中有三个图像，只有一个图像显示基于SQL的一个状态值。我想只显示一个图像，例如，如果状态= 1显示绿色图像，如果状态= 2显示红色图像。如何使用JQuery做到这一点?

HTML代码:

 <div id="divGraphic" style="text-align: center; margin: auto; width: 960px; height: 540px; overflow: hidden; position: relative;">
      <img src="img/overview2.png" style="width: 960px; height: auto; margin-top: -129px;" />
      <img class="crest green" src="img/green/crest-gate.png" />
      <img class="crest red" src="img/red/crest-gate.png" />
      <img class="crest yellow" src="img/yellow/crest-gate.png" />

使用JQuery动态更改图像

你会想使用Jquery attr()

作为一个例子

$("#img").attr("src","http://example.com/image.jpg");

这将允许你动态地改变一个图像的src位置，并完成你所要求的。

您可以在以下文档链接

中找到有关attr()的更多信息
http://api.jquery.com/attr/

从SQL数据库中提取数据。

您可能希望设置一些服务器端代码来提取任何特定的数据。并使用AJAX请求动态地获取这些信息。

Jquery使AJAX请求相当简单直接。

服务器端代码实际上取决于您的选择。但是要记住安全性，这种类型的工作(如果处理不当)可能会打开一些更大的安全漏洞。

相关文章：