從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動態獲取鏈接

回答

相關問題