2012-04-14 108 views
0

我试图添加一个单选按钮时检查目标属性的一些锚;但它不起作用。JavaScript:如何添加属性?

这里是我的代码:

<body> 
<ul id="main"> 
    <li><a href="https://www.google.co.uk/">Google</a></li> 
    <li><a href="http://www.youtube.com/">YouTube</a></li> 
    <li><a href="https://twitter.com/">Twitter</a></li> 
</ul> 
<input type="radio" name="input" id="input" /> 
<script type="text/javascript"> 
document.getElementById('input').checked = function changeTarget() { 
    document.anchors.setAttribute('target', '_blank'); 
} 
</script> 
</body> 

我在做什么错? (注意:我不想要JQuery解决方案)

谢谢。

编辑:Phew。完成它感谢所有的答案,这是我的最终代码:

document.getElementById('input').onclick = function changeTarget() { 
    if(this.checked) { 
     var b = document.getElementsByTagName('a'); 
     for (a = 0; a < b.length; a++) { 
      b[a].target = '_blank'; 
     } 
    } 
} 
+1

http://stackoverflow.com/questions/804256/how-do-i-add-target-blank-to-a-link-within-a-specified-div你可以检查这个 – mfadel 2012-04-14 12:11:39

回答

1

与您编辑的代码你_blank每次设定的目标当点击单选按钮时。同样anchors -collection不是在这种情况下使用的权利。

document.getElementById('input').onclick = function changeTarget() { 
    var n,a=document.links.length; 
    if(document.getElementById('input').checked){ 
     for(n=0;n<a;n++){ 
      document.links[n].target='_blank'; 
     } 
    } 
} 

document.links是包含在文档中的A -elements其具有hrefnohref或-attribute集合对象。集合对象与数组非常相似,您可以使用索引引用它的成员(n)。

+0

我对JavaScript没有信心,所以你能解释一下'link [n]'对我来说?至于[n]是什么意思?谢谢。 – Harry 2012-04-14 12:37:35

+0

@Teemu为什么你提倡'document.getElementById(“input”).value' over this.value'? – Dennis 2012-04-14 13:14:31

+0

引用“链接[n]”的原始问题是什么?[n]是什么? – Harry 2012-04-14 14:56:01

2

您正在设置单选按钮的“checked”属性为函数。 “checked”属性是布尔值,它指示当前是否检查单选按钮。因此,该声明具有将其设置为true的效果。你可能打算让它成为一个事件处理程序,所以应该是“onclick”而不是“checked”。

设置<a>标签的“目标”属性不能像这样完成。您必须使用document.getElementsByTagName(),然后遍历返回的节点列表,设置每个节点的“目标”属性。无需使用.setAttribute();只需在DOM节点上直接设置属性即可。

+0

Is * what * correct ? – Pointy 2012-04-14 12:20:15

+0

我把它编辑成主要问题对不起 – Harry 2012-04-14 12:21:24

+0

不,不要使用'document.anchors'。使用'document.getElementsByTagName('a')'。 – Pointy 2012-04-14 12:23:55

2

document.anchors是一个集合,因此您需要对其进行迭代。您还需要onclick事件 - 您可以确定是否检查输入。

document.getElementById('input').onclick = function changeTarget() { 
    if(this.checked) { 
     var anchors = document.getElementsByTagName("a"); 
     for(var i = anchors.length - 1; i>=0; i--) { 
      anchors[i].target = '_blank'; 
     } 
    } 
} 

根据MDN - document.anchors只返回一个name属性的锚 - gEBTN将返回所有的锚。

或者:

document.getElementById('input').addEventListener("click", changeTarget, false); 
+0

HTML中的“target”属性可以作为DOM节点上的属性直接访问。不需要使用'.setAttribute()'。 – Pointy 2012-04-14 12:09:26

+0

@Pointy好赶上 – Dennis 2012-04-14 12:12:30

1

我所知,checked是一个属性,所以你不能一个函数分配给它。 您可以在#input附加click事件改变锚target

document.getElementById('input').onclick = function() 
{ 
    var anchors = document.getElementsByTagName('a'); 
    if(this.checked) 
     for(var i = 0, s = anchors.length; i < s; i++) { 
      anchors[i].target = '_blank'; 
     } 
    else 
     for(var i = 0, s = anchors.length; i < s; i++) { 
      anchors[i].target = '_self'; 
     } 
} 

更新:在我的代码#INPUT必须复选框

<input type="checkbox" id="input" />