JavaScript函数 - 正确的实现方式

Question

大家好，感谢查看本文。

以下是正确的做法：

<script language="javascript">
function flag(nation)
{
this.nation=nation;
document.getElementById("flag").innerHTML="<img src='images/flags/'+nation+'.jpg'>";
}
</script>

在链接标签中添加这样的代码： onClick="flag(scotislands)"; 并将图像命名为 scotislands.jpg。

谢谢，B.

- Bift

Answer 1

在下面这行中，您的字符串标识符混淆了：

document.getElementById("flag").innerHTML="<img src='images/flags/'+nation+'.jpg'>"; 

应该是：

document.getElementById("flag").innerHTML='<img src="images/flags/'+nation+'.jpg">'; 

编辑
同样地，如Joel所指出的那样，onClick="flag(scotislands)"; 应该是 onClick="flag('scotislands')";

- Andy E

Answer 2

你需要在链接标签中引用文本，否则它会尝试并失败地查找名为scotislands的变量。

 onClick="flag('scotislands');"

然后将innerHTML的赋值更改为以下内容：

 document.getElementById("flag").innerHTML="<img src='images/flags/" + nation + ".jpg'>"

请注意在 URL 中使用单引号，但在每个内联文本位周围使用双引号。

一般来说，我更喜欢不显眼的东西（标记中没有代码）。使用框架，例如 jQuery，我会这样做：

 <a href="#scotislands" class="flag-identifier">Scotislands</a>

然后使用JavaScript，我会为所有这样的链接添加一个处理程序：

 $(function() {
     $('a.flag-identifier').click( function() {
         var flag = $(this).attr('href').replace('#','');
         $('#flag').html( '<img src="images/flags/' + flag + '.jpg" />' );
         return false;
     });
 });

这将添加一个点击处理程序，从锚点的 href 中获取标志名称，然后用国家名称添加到图像 URL 中构建的图像替换命名元素 flag 的内容。请注意，我省略了全局变量 nation，但如果需要，您也可以在点击处理程序中轻松设置它。

- tvanfosson

---

它只是在国旗div中返回：<img .jpg="" +nation+="" src="images/flags/"/>？ - Bift

哎呀，我没注意到你的引号也错了。我会更新的。 - tvanfosson

一般来说，我也更喜欢不显眼的代码，但缺点是你会将事件处理程序绑定到可能永远不会被点击的元素上，这会影响性能。因此，onclick/onwhatever属性并不总是坏事。 - Alex

在遇到性能问题之前，我会一直使用非侵入式的JavaScript。迄今为止，我从未被迫使用内联JavaScript。 - tvanfosson

Answer 3

你设置的innerHTML字符串没有正确地加引号。请尝试这样：

document.getElementById("flag").innerHTML="<img src='images/flags/'+nation+'.jpg'>";

此外，您的 onClick 正试图发送一个名为“scotislands”的不存在对象。请改用以下代码：

onClick="flag('scotislands');"

- Joel Harris

Answer 4

function flag(nation) {
  var myFlag = document.getElementById("flag").getElementsByTagName("img")[0];
  myFlag.src = "images/flags/"+nation+".jpg";
}

- Sampson

---

这在很大程度上依赖于flag元素内已经存在图像。 - Tim Down

Answer 5

这取决于你所说的“正确”是什么意思。我猜测从你使用 innerHTML 的事实来看，你并不是指“符合诸如 DOM 等公认标准”，但这正是我所提供的：

function flag(nation) {
    var flagEl = document.getElementById("flag");
    while (flagEl.firstChild) {
        flagEl.removeChild(flagEl.firstChild);
    }
    var img = document.createElement("img");
    img.src = "images/flags/" + nation + ".jpg";
    flagEl.appendChild(img);
}

- Tim Down