使用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>标签，并在"class"中指定图像位置：

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

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

Answer 1

<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(/bNb/g)) {
windd.className = "wi-wind-default _0-deg";
// If the letter is "NNE"
} else if (winddirection.match(/bNNEb/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 2

更新

为了满足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)';

这是West

详细信息在代码段中进行评论

SNIPET

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

Answer 3

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

<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");
}
}