使用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>標簽並在“類”中指定圖像位置：

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