0

製品カタログのページがあり、その名前（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/

4

1 に答える 1

1

これが修正されたスクリプトとhtmlです。IDは一意である必要があるため、2つの異なるdivに異なる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 idを変更したくない場合は、次のスクリプトを使用してください。

    <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-20T16:18:31.123 に答える