Как создать идентификатор с атрибутом sr c из функции или переменной? - PullRequest
Новая
       7

Как создать идентификатор с атрибутом sr c из функции или переменной?

0 голосов
/ 11 февраля 2020

У меня есть общая функция javascript для получения местоположения исходного изображения на основе значения PM2.5. Следующий код не работает: 

<!DOCTYPE html>
<html>
  <body>
    <p>Finding the aqiicon.</p>
    <p id="#aqiicono"></p>

    <script>
      var aqiicon = "";
      var pm25o = 12.0;
      // aqiicon = pm25toicon(pm25o);
      $("#aqiicono").attr("src", pm25toicon(pm25o));
    </script>

    <script>
      function pm25toicon(pm25) {
        if (pm25 < 12.1) {
          return "'img/aqi1.png'";
        } else if (pm25 < 35.5) {
          return "'img/aqi2.png'";
        } else if (pm25 < 55.5) {
          return "'img/aqi3.png'";
        } else if (pm25 < 150.5) {
          return "'img/aqi4.png'";
        } else if (pm25 < 250.5) {
          return "'img/aqi5.png'";
        } else {
          return "'img/aqi6.png'";
        }
      }
      // document.getElementById("demo").innerHTML = pm25toicon(300);
    </script>
  </body>
</html>

Функция pm25toicon получает значение PM2.5 и возвращает соответствующее местоположение значка, затем я попытался назначить атрибут источника для идентификатора с помощью оператора: 

$('#aqiicono').attr('src', pm25toicon(pm25o));

Ценю любое предложение.

Ответы [ 3 ]

1 голос
/ 11 февраля 2020

У вас есть некоторые ошибки в ваших скриптах, вот предложение:

  • Первый , вы должны вызывать свою функцию, когда страница правильно загружена с Jquery
  • Второй вы не должны ставить возврат "'", иначе ваш img будет выглядеть так:

  • Третий вы пытаетесь загрузить изображение внутри <p> и отредактировать его до img Вот код

    Нахождение aqiicon. 

    <script>
  var aqiicon = "";
  var pm25o = 12.0;

  function pm25toicon(pm25) {
    if (pm25 < 12.1) {
      return "img/aqi1.png";
    } else if (pm25 < 35.5) {
      return "img/aqi2.png";
    } else if (pm25 < 55.5) {
      return "img/aqi3.png";
    } else if (pm25 < 150.5) {
      return "img/aqi4.png";
    } else if (pm25 < 250.5) {
      return "img/aqi5.png";
    } else {
      return "img/aqi6.png";
    }
  }

  // Replace src when document is loaded
  $(document).ready(function() {
    $("#aqiicono").attr("src", pm25toicon(pm25o));
  });
</script>

0 голосов
/ 11 февраля 2020

Еще раз спасибо. Вот рабочий код, предложенный вами двумя: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<p>Finding the aqiicon.</p>
<img id="aqiicono" />


<script>
function pm25toicon(pm25) {
if (pm25 < 12.1)
{return 'img/aqi1.png';}
else if (pm25 < 35.5)
{return 'img/aqi2.png';}
else if (pm25 < 55.5)
{return 'img/aqi3.png';}
else if (pm25 < 150.5)
{return 'img/aqi4.png';}
else if (pm25 < 250.5)
{return 'img/aqi5.png';}
else
{return 'img/aqi6.png';}
} 

$('#aqiicono').attr('src', pm25toicon(pm25o));
</script>


</body>
</html>
0 голосов
/ 11 февраля 2020

Немного обновил ваш код.

  1. изменено <p id="#aqiicono"></p> на <img id="aqiicono" />
  2. Перед использованием объявление fcn перемещено вверх 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<p>Finding the aqiicon.</p>
<img id="aqiicono" />


<script>
function pm25toicon(pm25) {
if (pm25 < 12.1)
{return "'img/aqi1.png'";}
else if (pm25 < 35.5)
{return "'img/aqi2.png'";}
else if (pm25 < 55.5)
{return "'img/aqi3.png'";}
else if (pm25 < 150.5)
{return "'img/aqi4.png'";}
else if (pm25 < 250.5)
{return "'img/aqi5.png'";}
else
{return "'img/aqi6.png'";}
} 

var aqiicon = ''
var pm25o = 12.0;
// aqiicon = pm25toicon(pm25o);
$('#aqiicono').attr('src', pm25toicon(pm25o));
</script>


</body>
</html>
...