javascript DIV 语句中的 If / Else？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16490052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
If / Else in DIV statement?
提问by W2ZXL
First, I am not a programmer anymore... It's been years since doing it and even then it was only VBA and old school HTML.
首先，我不再是程序员了……我已经做了很多年了，即便如此，它也只是 VBA 和老派 HTML。
What I would like to do is to show an image on my site in place of another depending on it's "state". For example, the site is http://w2zxl.hevener.com/, towards the bottom of the page is a script that loads a HAM radio logbook as well as my current status in nearly real time. If I am on the Air, it will show a small image that says "On Air"and then show what frequencyI am on and the ModeI am working in. When I am off the air however, that little image just disappears and shows nothing.
我想做的是根据它的“状态”在我的网站上显示一个图像来代替另一个图像。例如，该站点是http://w2zxl.hevener.com/，页面底部是一个脚本，几乎实时加载 HAM 无线电日志以及我的当前状态。如果我在直播中，它会显示一个小图片，上面写着“直播”，然后显示我的频率和我正在工作的模式。但是，当我停播时，那个小图片会消失并显示没有什么。
What I would like to do is to create a small image to replace the "nothing". In other words, if I am Off Air, I would like to show an "Off Air"image instead of nothing at all.
我想做的是创建一个小图像来替换“无”。换句话说，如果我是 Off Air，我想显示一个“Off Air”图像而不是什么都不显示。
Is there an If/Then/Else statement that can do this given the code I am providing below?
鉴于我在下面提供的代码，是否有可以执行此操作的 If/Then/Else 语句？
Code below:
代码如下：
<!-- 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 -->
回答by Mehdi Yeganeh
You can not do that with pure HTML and you had 2 way for solving this
你不能用纯 HTML 来做到这一点，你有 2 种方法来解决这个问题
- If you like markup languages you can use xsl that have if else tag for you
- Using Javascript and check if you be on air show on air image and if you not be shows off air
- 如果你喜欢标记语言，你可以使用带有 if else 标签的 xsl
- 使用 Javascript 并检查您是否正在播出图像，如果没有在空中表演
for you the better way is change some javascript code in your site..
对您来说，更好的方法是更改您网站中的一些 javascript 代码。
you should overwrite ohrdlog.LoadOnAir then you have two way again:
你应该覆盖 ohrdlog.LoadOnAir 然后你有两种方法：
- change http://www.hrdlog.net/hrdlog.jssource code and rewrite LoadOnAir function
- overwrite LoadOnAir function with inserting script tag after load http://www.hrdlog.net/hrdlog.js
- 更改http://www.hrdlog.net/hrdlog.js源代码并重写 LoadOnAir 函数
- 加载http://www.hrdlog.net/hrdlog.js后插入脚本标签覆盖 LoadOnAir 函数
i choose number 2 for you because i think you can`t change script that you load it from another domain address... now you should insert this code after this part:
我为您选择数字 2，因为我认为您无法更改从另一个域地址加载它的脚本...现在您应该在这部分之后插入此代码：
<script type="text/javascript" language="javascript" src="http://www.hrdlog.net/hrdlog.js"></script>
and you can found link of offair image in HrdLog.prototype.ShowOffAir function that now, i point it to http://2.bp.blogspot.com/_Dr3YNV7OXvw/TGNNf561yQI/AAAAAAAABIk/-E2MB4jLP_o/s400/Off-Air.jpg:
您可以在 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="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) + ' ';
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>
回答by Jasen
Consider swapping CSS classes to change the background-imageinstead. This will simplify the javascript and html markup. When you're on air change the class to onairand toggle as needed to offair.
考虑交换 CSS 类来改变它background-image。这将简化 javascript 和 html 标记。当您播出时，将课程更改为onair并根据需要切换到offair。
CSS
CSS
.onair {
background-image: url("onair.jpg");
}
.offair {
background-image: url("offair.jpg");
}
Html
html
<div id="hrdlog-oa" class="offair"></div>
Javascript
Javascript
var statusDiv = document.getElementById("hrdlog-oa");
if (statusDiv.className == "offair") {
statusDiv.className = "onair";
}
else {
statusDiv.className = "offair";
}
Working jsfiddle http://jsfiddle.net/jasenhk/qMAZU/using background-colorinstead.
使用jsfiddle http://jsfiddle.net/jasenhk/qMAZU/background-color代替。
