javascript函数 - 正确的方式做到这一点

问题描述：

什么是正确的方式做到这一点：在链接标签与此

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

：的onClick =“标志（scotislands）“;并且图像名称为scotislands.jpg

非常感谢， B.

答

在以下行中，你有你的字符串标识符混合起来：

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

它应该是：

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

编辑
此外，乔尔发现，onClick="flag(scotislands)";应该是onClick="flag('scotislands')";

宾果 - 谢谢大家！ – Bift 2010-02-02 15:02:56

答

你需要引用的链接标签的文本，否则它会尝试并未能找到一个变量名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，但是如果需要，您也可以从click处理程序中轻松设置它。

它只返回：内国旗的div？ – Bift 2010-02-02 14:52:43

糟糕。我错过了你的报价也是错误的。我会更新。 – tvanfosson 2010-02-02 14:55:19

一般而言，我更喜欢不引人注意的代码，但缺点是您将事件处理程序绑定到可能永远不会被点击的元素，并且需要性能。所以onclick/onwhatever属性并不总是一件坏事。 – Alex 2010-02-02 14:59:14

答

您正在将innerHTML设置为的字符串未正确引用。试试这个：

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

此外，你的onClick试图发送一个名为“scotislands”的不存在的对象。试试这个：

onClick="flag('scotislands');"

答

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

我会为完整的DOM路线+1，但我不参与投票:) – 2010-02-02 14:59:23

这相当依赖于'flag'元素内已经有一个图像。 – 2010-02-02 16:06:36

@Tim：是的。我假设一个标志默认显示。 – Sampson 2010-02-02 16:18:41

答

这取决于您所说的“正确”。我从你使用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); 
}

javascript函数 - 正确的方式做到这一点

相关推荐