从childNodes的innerHTML动态获取链接

我有产品目录的页面，需要为使用它的名称（innerHTML）的每个产品分配链接。该页面看起来像：从childNodes的innerHTML动态获取链接

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function searchlinks() { 
var catbox=document.getElementById("category-box"); 
var boxcont=catbox.getElementsByTagName("a"); 
var h3href=catbox.getElementsByTagName("h3"); 

var www0="../search/" + h3href[0].innerHTML + "+" + boxcont[0].innerHTML; 
var www1="../search/" + h3href[0].innerHTML + "+" + boxcont[1].innerHTML; 
var www2="../search/" + h3href[0].innerHTML + "+" + boxcont[2].innerHTML; 
var www3="../search/" + h3href[0].innerHTML + "+" + boxcont[3].innerHTML; 

boxcont[0].href=www0; 
boxcont[1].href=www1; 
boxcont[2].href=www2; 
boxcont[3].href=www3; 

} 
</script> 
</head> 
<body onload="searchlinks()"> 

<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent"> 
    <h3>Clothing</h3> 
<a href="">Men's</a> 
<a href="">Women's</a> 
<a href="">Boys'</a> 
<a href="">Girls'</a> 
</div></div></div> 

<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent"> 
    <h3>Protective Gear</h3> 
<a href="">Chin Straps</a> 
<a href="">Facemasks</a> 
<a href="">Flak Jackets</a> 
<a href="">Girdles</a> 
<a href="">Hand Pads</a> 
<a href="">Arm Pads</a> 
<a href="">Helmets</a> 
<a href="">Hip Pads</a> 
</div></div></div> 
</body> 
</html>

但我遇到了很多问题。这里是我的问题：
1）如何动态分配链接？（不使用var = www0，www1 ...）
2）函数searchlinks()仅影响第一个“category-block”div。 如何在页面上的所有这样的div使用此功能？

这里是我的jsfiddle：http://jsfiddle.net/RGe8U/1/

来源

2013-03-20 John Johansen

这里是固定的脚本和HTML。我为两个不同的div分配了不同的id，因为id应该是唯一的，然后单独搜索它们并为它们调用addLink函数。

<html> 
<head> 
<script> 
function addLink(catbox) { 
     var boxcont=catbox.getElementsByTagName("a"); 
     var h3href=catbox.getElementsByTagName("h3"); 
     //alert(h3href[0].innerHTML); 
     for (var i=0; i<boxcont.length; i++) { 
       boxcont[i].href="../search/" + h3href[0].innerHTML + "+" + boxcont[i].innerHTML; 
     } 
} 
function searchlinks() { 
     addLink (document.getElementById("category-box")); 
     addLink (document.getElementById("category-box2")); 
} 
</script> 
</head> 
<body onload="searchlinks()"> 

<div id="category-box"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent"> 
    <h3>Clothing</h3> 
<a href="">Men's</a> 
<a href="">Women's</a> 
<a href="">Boys'</a> 
<a href="">Girls'</a> 
</div></div></div> 

<div id="category-box2"><div class="category-block"><div class="category-blockimage"><img src="" alt="" ></div><div class="category-blockcontent"> 
    <h3>ProtectiveGear</h3> 
<a href="">Chin Straps</a> 
<a href="">Facemasks</a> 
<a href="">Flak Jackets</a> 
<a href="">Girdles</a> 
<a href="">Hand Pads</a> 
<a href="">Arm Pads</a> 
<a href="">Helmets</a> 
<a href="">Hip Pads</a> 
</div></div></div> 
</body> 
</html>

编辑：如果你不想改变div编号，然后使用这个脚本：

<script> 
function addLink(catbox) { 
     var boxcont=catbox.getElementsByTagName("a"); 
     var h3href=catbox.getElementsByTagName("h3"); 
     alert(h3href[0].innerHTML); 
     for (var i=0; i<boxcont.length; i++) { 
       boxcont[i].href="../search/" + h3href[0].innerHTML + "+" + boxcont[i].innerHTML; 
     } 
} 
function searchlinks() { 
     var divs = document.getElementsByTagName("div"); 
     for (var i=0; i<divs.length; i++) { 
       if (divs[i].id === "category-box") 
       addLink (divs[i]); 
     } 
} 
</script>

来源

2013-03-20 16:18:31 sowrov

非常感谢您！这非常有用！也许有一种技术将数字（“category-box”，“category-box2”）添加到ID并动态使用“addlink”？ – 2013-03-20 16:36:31

ID被认为是唯一的，AFAIK具有相同ID的多个元素是非常糟糕的做法。如果你想“动态地”更改ID，那么没有要点的ID。无论如何，我已经用新脚本编辑了我的答案，以便您可以保留多个具有相同ID的div。希望它会帮助:) – sowrov 2013-03-20 17:01:15

好的。谢谢！ – 2013-03-20 17:11:24

从childNodes的innerHTML动态获取链接

回答

相关问题