根据 Javascript 的特定文本有条件地显示图像

Question

我正在构建一个天气网站，我想使用 Javascript 根据文本有条件地显示图像。文本是一个方向（例如：N、E、S、W），我想显示相应的图像以显示实际方向。风向文字是一个参数，不能更改，只会显示文字(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>标签，在"class"中指定图片位置：

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

有人知道怎么解决吗？谢谢。

Answer 1

检查此代码，如果它有效，请告诉我。

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

你必须点击你好才能执行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)';

那是西部

代码段中评论了详细信息

片段

// 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>

根据 Javascript 的特定文本有条件地显示图像

Conditionally Display image based on specific text with Javascript

javascript

conditional

text

image

display