Question

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

我想要做的是在我的网站上显示一个图像而不是另一个图像取决于它＆＃34;状态＆＃34;。例如，站点为http://w2zxl.hevener.com/，页面底部是一个脚本，可以近乎实时地加载HAM无线电日志以及我当前的状态。如果我在空中，它会显示一个小图像，上面写着 ＆＃34; On Air＆＃34; ，然后显示频率我正在和模式我正在工作。但是当我停止播放时，那个小小的图像就会消失而且什么都没有显示。

我想要做的是创建一个小图像来替换＆＃34; nothing＆＃34; 。换句话说，如果我是Off Air，我想展示＆＃34; Off Air＆＃34; 图像，而不是一无所有。

根据我在下面提供的代码，是否有可以执行此操作的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

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

如果您喜欢标记语言，可以使用带有if else标记的xsl
使用Javascript并检查您是否在航空影像上播出，如果您没有播放节目

对你而言，更好的方法是更改您网站中的一些JavaScript代码..

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

更改http://www.hrdlog.net/hrdlog.js源代码并重写LoadOnAir函数
在加载http://www.hrdlog.net/hrdlog.js

我为你选择了2号因为我认为你不能改变你从另一个域地址加载它的脚本......现在你应该在这部分之后插入这段代码：

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

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

<script type="text/javascript" language="javascript">
HrdLog.prototype.ShowOffAir = function() {
    return '<img src="http://2.bp.blogspot.com/_Dr3YNV7OXvw/TGNNf561yQI/AAAAAAAABIk/-E2MB4jLP_o/s400/Off-Air.jpg" height="33" width="65" />';
}
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>

Answer 2

考虑交换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";
}

使用background-color改为使用jsfiddle http://jsfiddle.net/jasenhk/qMAZU/。

如果/在DIV声明中？

以下代码：

2 个答案: