Динамическое изменение изображения с помощью JQuery

Question

Кстати, я новичок в JQuery !. На html-странице есть три изображения, и только одно изображение отображает одно значение статуса из SQL. Я хочу отображать только одно изображение, например, если status = 1 показывает зеленое изображение, а если status = 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" /> 

Answer 1

Вы хотели бы использовать JQuery ATTR()

В качестве примера

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

Это позволит вам динамически изменять расположение изображения Src и выполнить то, что вы запросили.

Вы можете найти более подробную информацию о ATTR() по следующей ссылке документации

http://api.jquery.com/attr/

Как для вытягивать данные из базы данных SQL.

Вы хотите установить код на стороне сервера, чтобы вытащить любые конкретные данные. И используйте запрос AJAX для динамического захвата этой информации.

JQuery делает запросы AJAX довольно простыми и прямыми.

Код на стороне сервера действительно по вашему выбору. Имейте в виду безопасность, хотя этот тип работы может (если не обрабатываться должным образом) открыть некоторые более крупные дыры в безопасности.