1

以下のコードを使用して、正常に動作するランダムな画像を表示しています。各画像が独自のリンクを取得するように、このコードに追加するにはどうすればよいですか? つまり、「knife.png」がランダムに選択された場合、ユーザーを「products/knife.html」などに移動するリンクが必要です。

助けてくれてありがとう！

<div id="box">
<img id="image" /></div>

<script type='text/javascript'> 

var images = [
"images/knife.png",
"images/fork.png",
"images/spoon.png",
"images/chopsticks.png",];

function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = images[x];
}

randImg();
4

4 に答える 4

0

規則ベースのアプローチを使用できます。この場合、慣習として、各製品には「/image/[product]/.png」に関連する画像があり、「products/[product].html」にページがあります。

<div id="box">
<a id="link"><img id="image" /></a></div>

<script type='text/javascript'> 

var products = [
"knife",
"fork",
"spoon",
"chopsticks",];

function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = "/images/" + products[x] + ".png";
document.getElementById('link').setAttribute("href", "products/" + products[x] + ".html");
}

randImg();

これは非常に素朴なアプローチであり、うまくスケーリングできません。たとえば、頻繁に変更される製品のリストがある場合や、利用可能なユニット数を追跡​​する必要がある場合などです。より堅牢なアプローチは、製品に関する情報をデータベースに保存し、特定の製品に関するデータを表示するページ (製品詳細ページ) にデータ アクセス テクノロジを使用して、表示する製品のリストを取得することです。製品リスト ページ (製品のリストがハードコードされていないことを除いて、ここにあるものと同様) であり、各製品は製品詳細ページにリンクします。

于 2013-05-21T22:02:08.460 に答える
0

で囲みimgますa

<a href="#" id="link"><img id="image" /></a>

それから加えて

document.getElementById("link").href = images[x].replace(".png",".html");

少し大雑把.replaceですが、アイデアはわかります。

于 2013-05-21T22:00:34.770 に答える