有条件地使用Javascript基于特定文本显示图像

Question

我正在构建一个天气网站，我想使用Javascript根据文本有条件地显示图像。文本是一个方向（例如：N，E，S，W），我想显示一个相应的图像来显示实际的方向。风向文本是参数<!--windDirection-->，不能更改，只显示文本（N，E，S，W）。至于图像，它是Glyphicon而不是JPG / GIF图像。我使用以下脚本进行了测试，但根本没有发生任何事情。

<script>
function checkwinddircetion() {
    var winddirection = <!--windDirection-->
    var wind = document.getElementById("windd")

    // If the letter is "N"
    if (winddirection.match = "N") {
        windd.class = "wi-wind-default _0-deg";

    // If the letter is "NNE"
    } else if (winddirection.match = "NNE") {
        windd.class = "wi-wind-default _30-deg";

    // If the letter is anything else
    } else {
        windd.class = "wi-wind-default _45-deg font-size-80 text-center";
    }
}
</script>

显示图片的地方就是这样，它没有使用普通的<img>标记，而是使用<i>标记在＆＃34; class＆＃34;中指定图像位置：

<i name="windd" class=""></i>

任何人都知道如何解决它？谢谢。

Answer 1

查看此代码，告诉我它是否有效。

<i id="windd" onclick="checkwinddircetion()" class="">hello</i>

您必须单击hello才能执行checkwinddirection();

function checkwinddircetion() {
    var winddirection = "N";
    var wind = document.getElementById("windd");
        // If the letter is "N"
    if (winddirection.match = "N") {
        windd.setAttribute("class", "wi-wind-default _0-deg");

    // If the letter is "NNE"
    } else if (winddirection.match = "NNE") {
        windd.setAttribute("class","wi-wind-default _30-deg");

    // If the letter is anything else
    } else {
        windd.setAttribute("class","wi-wind-default _45-deg font-size-80 text-center");
    }
}

Answer 2

<i id="windd" class=""></i>
  --^--(here use id attribute)
<script>
function checkwinddircetion() {
    var winddirection = <!--windDirection-->
     var wind = document.getElementById("windd");
    // If the letter is "N"
    if (winddirection.match(/\bN\b/g)) {
        windd.className = "wi-wind-default _0-deg";
    // If the letter is "NNE"
    } else if (winddirection.match(/\bNNE\b/g)) {
        windd.className = "wi-wind-default _30-deg";
    // If the letter is anything else
    } else {
        windd.className = "wi-wind-default _45-deg font-size-80 text-center";
    }
}
</script>

Note: Add Javascript code after loading markup or at bottom of the page, The document is parsed from top to bottom. Typically, scripts can't find elements which appear later in the markup because those elements haven't yet been added to the DOM.

Answer 3

<强>更新

为了保持在OP的要求范围内，我添加了一个switch()来处理8个更换8个类的条件。条件是来自#direction的用户输入的实数值（即<input>）。结果是指示8个基本方向点之一的文本：N，NE，E，SE，S，SW ，W，NW

添加<input>用于演示目的。基本上，如果你处理数字*而不是课程，你会有更大的灵活性。如果你想要一个准确的方向，你需要以某种方式动态地创建和操作360类。

使用简单的表达式，您可以在不使用类的情况下将风向标旋转360度。

*变量输入不是实数，而是表示数字的字符串。

基本代码

  <i id='needle' class='fa fa-arrow-up'></i>
  var pnt = document.getElementById('needle');
  var news = '270';
  pnt.style.transform = 'rotate(' + news + 'deg)';

那是西方

详细信息在Snippet中进行了评论

<强>段

// Reference the number <input>
var dir = document.getElementById('direction');

// When user inputs data into #direction call windVane
dir.addEventListener('input', windVane, false);


function windVane(e) {
  // Reference the <nav>
  var wv = document.getElementById('windVane');

  // Reference the <i>con
  var pnt = document.getElementById('needle');

  // Store the value of #direction's data in a var
  var news = this.value;

  // Convert news into a real number
  var deg = parseInt(news, 10);

  /* Rotate #needle as many degrees as the value
  || of the variable news has from #direction
  */
  pnt.style.transform = 'rotate(' + news + 'deg)';


  /* This switch passes in deg which stores the real
  || numbers of current direction #needle points to.
  || There are 8 cardinal points repesented as a class.
  || When the value of deg changes, so does the text
  || of the pseudo-element of #windVane.
  */
  // One breakdown of a step explained 
  switch (true) {
    case (deg === 360 || deg === 0):
      wv.className = '';
      wv.classList.add('n');
      break;
    case (deg < 90):
      wv.className = '';
      wv.classList.add('ne');
      break;
    case (deg === 90):
      wv.className = '';
      wv.classList.add('e');
      break;
      // If deg is less than 180...
    case (deg < 180):
      // Remove #windVane's class
      wv.className = '';
      // Add the .se class to #windVane
      wv.classList.add('se');
      // Go no further down this switch loop is done
      break;
    case (deg === 180):
      wv.className = '';
      wv.classList.add('s');
      break;
    case (deg < 270):
      wv.className = '';
      wv.classList.add('sw');
      break;
    case (deg === 270):
      wv.className = '';
      wv.classList.add('w');
      break;
    case (deg < 360):
      wv.className = '';
      wv.classList.add('nw');
      break;
    default:
      wv.className = '';
      wv.classList.add('n');
      break;
  }

}

#windVane {
  margin: 1ch 1ch 0 0;
  font: 400 16px/1 Times;
}
/* 8 Cardinal Points 
|| These pseudo-elements will activate upon
|| the condition of degrees #needle is at
*/

#windVane.n::after {
  content: 'N';
}
#windVane.ne::after {
  content: 'NE';
}
#windVane.e::after {
  content: 'E';
}
#windVane.se::after {
  content: 'SE';
}
#windVane.s::after {
  content: 'S';
}
#windVane.sw::after {
  content: 'SW';
}
#windVane.w::after {
  content: 'W';
}
#windVane.nw::after {
  content: 'NW';
}
#needle {
  font-size: 4ch;
}
input {
  width: 5ch;
  font: inherit;
}

<!--Using Font-Awesome for arrow icon; it's like GlyphIcon
----on steroids-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">

<!--This number input is to simulate the data input that 
----your app would use-->
<label for='needle'>Enter a number (max.360):</label>
<input id='direction' type='number' min='0' max='360' step='1'>

<!--#windVane contains #needle and displays a text of 
----what direction #needle is pointing to. #needle is 
----your icon which by means of the tranform:rotate css
----property we will able to turn it all 360 degrees. 
----Make sure your <i>con has an id to reference-->
<nav id='windVane' class='n'>
  <i id='needle' class='fa fa-arrow-up'></i>
</nav>