javascript - 如果/否则在 DIV 语句中？

Question

首先，我不再是程序员了......自从这样做已经有好几年了，即便如此，它也只是 VBA 和老式的 HTML。

我想做的是根据它的“状态”在我的网站上显示一个图像来代替另一个图像。例如，该站点是http://w2zxl.heverer.com/，页面底部是一个几乎实时加载 HAM 无线电日志以及我当前状态的脚本。如果我在直播，它会显示一个小图像，上面写着“直播”，然后显示我正在使用的频率和我正在使用的模式。但是，当我停播时，那个小图像就会消失并显示没有什么。

我想做的是创建一个小图像来替换"nothing"。换句话说，如果我是 Off Air，我想显示一个“Off Air”图像，而不是什么都没有。

鉴于我在下面提供的代码，是否有一个 If/Then/Else 语句可以做到这一点？

下面的代码：

<!-- HRDLOG.net script start --><center>
<div id="hrdlog-oa"> </div>
<div id="hrdlog">www.hrdlog.net</div>
<script type="text/javascript" language="javascript" src="http://www.hrdlog.net/hrdlog.js"></script>
<script type="text/javascript" language="javascript">// <![CDATA[
var ohrdlog = new HrdLog('W2ZXL');
setInterval('ohrdlog.LoadOnAir()', 5000);
ohrdlog.LoadLastQso(10);
// ]]></script>
<img src="http://www.hrdlog.net/callplate.aspx?user=W2ZXL" alt="W2ZXL CallPlate" /></center><!-- HRDLOG.net script stop -->

Answer 1

考虑交换 CSS 类来改变它background-image。这将简化 javascript 和 html 标记。当您在直播时，将课程更改为onair并根据需要切换为offair。

CSS

.onair {
    background-image: url("onair.jpg");
}
.offair {
    background-image: url("offair.jpg");
}

html

<div id="hrdlog-oa" class="offair"></div>

Javascript

var statusDiv = document.getElementById("hrdlog-oa");

if (statusDiv.className == "offair") {
    statusDiv.className = "onair";
}
else {
    statusDiv.className = "offair";
}

使用jsfiddle http://jsfiddle.net/jasenhk/qMAZU/background-color代替。

Answer 2

你不能用纯 HTML 做到这一点，你有两种方法来解决这个问题

1. 如果您喜欢标记语言，您可以使用带有 if else 标记的 xsl
2. 使用 Javascript 并检查你是否在空中图像上进行空中表演，如果你不是在空中表演

对您来说，更好的方法是更改​​您网站中的一些 javascript 代码..

你应该覆盖 ohrdlog.LoadOnAir 然后你有两种方法：

1. 更改http://www.hrdlog.net/hrdlog.js源代码并重写 LoadOnAir 函数
2. 在加载http://www.hrdlog.net/hrdlog.js后使用插入脚本标签覆盖 LoadOnAir 函数

我为您选择 2 号，因为我认为您无法更改从另一个域地址加载它的脚本...现在您应该在这部分之后插入此代码：

<script type="text/javascript" language="javascript" src="http://www.hrdlog.net/hrdlog.js"></script>

您可以在 HrdLog.prototype.ShowOffAir 函数中找到离线图像的链接，现在我将其指向http://2.bp.blogspot.com/_Dr3YNV7OXvw/TGNNf561yQI/AAAAAAABIk/-E2MB4jLP_o/s400/Off-Air.jpg：

<script type="text/javascript" language="javascript">
HrdLog.prototype.ShowOffAir = function() {
    return '[<img src="https://i.stack.imgur.com/WEr1B.jpg" height="33" width="65" />][2]';
}
HrdLog.prototype.LoadOnAir = function() {
    var t = this;
    var async = new Async();
    async.complete = function(status, statusText, responseText, responseXML, obj) {
        if (status == 200) {
            txt = '';

            var xmldoc = responseXML;
            var onairdoc = xmldoc.getElementsByTagName('OnAir');
            if (onairdoc.length == 1) {
                onair = onairdoc.item(0);
                if (onair.getElementsByTagName('oa_QRZ').length > 0) {
                    txt += '<img src="http://www.hrdlog.net/images/onair.gif" height="33" width="65" /><br/>';
                    txt += '<font size="+1">' + onair.getElementsByTagName('oa_QRZ')[0].childNodes[0].nodeValue + ' is on air</font><br/>';
                    txt += '<b>';
                    txt += FormatNumber(onair.getElementsByTagName('oa_Frequency')[0].childNodes[0].nodeValue) + '&nbsp;';
                    try {
                        txt += onair.getElementsByTagName('oa_Mode')[0].childNodes[0].nodeValue + '</b><br/>';
                        txt += onair.getElementsByTagName('oa_Radio')[0].childNodes[0].nodeValue + '<br/><br/>';
                    } catch (e) { }
                    //txt += onair.getElementsByTagName('oa_Status')[0].childNodes[0].nodeValue + '<br/>';
                }else{
                    txt += t.ShowOffAir();
                }
            }else{
                txt += t.ShowOffAir();
            }

            element = document.getElementById('hrdlog-oa');
            if (element != null) {
                element.innerHTML = txt;
            }

        } else {
            alert('Error\n' + statusText);
        }
    }

    if ((new Date().getTime() - this._lastLoadOnAir.getTime()) > 14500) {
        this._lastLoadOnAir = new Date();
        async.req(this._host + 'hrdlog.aspx?onair=' + this._qrz, this);
    }
}
</script>