Question

经过大量的谷歌搜索，我在Stack Exchange上嘲笑和审核。

我想做的事听起来很简单。我想创建一个<div> id / class，它将通过某种脚本自动创建链接到自己。

让我放下一些伪代码，然后让它听起来比它更复杂：

#Let div.link = xxx.html
#Let div.pic = xxx.png/jpg

for div in HTMLdocument:
    if div.class == "autolink":
        div = "<a href=\"mysite/" + div.link + "><img src=\"mysite/" + div.pic + "></a>"

现在，显然是Python的伪代码，但我熟悉（ish）PHP和Javascript。基本上，我想让div生成HTML链接，而不必为网页上的每个给定div实际输入标记和链接。我希望能够在index.html：

中输入内容

<html>
    <head></head>
    <body>
        <div class = "1"></div>
        <div class = "2"></div>
    </body>
</html>

然后呈现一个页面，其中有两个div已链接，已成像，并且最好是格式化的。

就像我说的那样，问题似乎很简单，但我似乎无法用任何语言使其正常工作。对于开端的网页设计师来说，这似乎是非常有用的东西。

个人注意：

我最好希望看到PHP或Javascript的解决方案，但是如果你对Django很好并想告诉我如何完成它，我会同样感激不尽！

=========================================

实施例

我们假设你有一个基于浏览器的RPG，并且你想要显示你玩家的广告资源。 “广告资源”页面将根据该用户的广告资源页面中的内容显示玩家广告资源中的项目，其中包含链接和图片。它看起来像这样（这是非常粗略的输出，语句标记在＃这些＃不是代码，应该按照他们的描述进行交互）：

<h1>User's Inventory:</h1>
<p><div class = "item_1">#Link to page of 'item_1', image of 'item_1'#</div></p>
<p><div class = "item_2">#Link to page of 'item_2', image of 'item_2'#</div></p>

上面会大致显示一个标题，表示＆＃34;用户的广告资源＆＃34;，然后显示item_1的关联图片，然后是换行符，然后是关联的图片item_2，其中所述项目将位于单独的文件中，或列出列出所有项目及其各自链接和图像的列表。

Answer 1

我将在php中提供一个示例。如果您已经有一组要使用的链接

，这是一个示例

<?php
   //Create a multidimensional array to store all you need to create links
   $links['1'][]="http://www.yahoo.com";
   $links['1'][]="yahoo.com";
   $links['2'][]="http://www.facebook.com";
   $links['2'][]="yahoo.com";
   $links['3'][]="http://www.google.com";
   $links['3'][]="yahoo.com";

   foreach($links as $class => $innerArray){
     $link=innerArray[0];
     $linktext=innerArray[1];

     echo "<div class='$class'><a href='$link'>$linktext</a></div>";
   }

＆GT;

这会为您创建div，因此您无需提前添加它们。您可以以相同的方式添加图像

Answer 2

你可以使用jquery，当加载页面dom时，你循环遍历具有类div的每个autolink并进行操作（将你想要的html添加到每个div中）。您可以使用每个id的{{1}}将数据放入其中。您可以为不同类型的数据使用该id值的前缀。例如，我使用“inventory_”作为前缀。

div

然后jquery 准备好文档：

<h1>User's Inventory:</h1>
<p><div class = "autolink" id="inventory_item_1">#Link to page of 'item_1', image of 'item_1'#</div></p>
<p><div class = "autolink" id="inventory_item_1">#Link to page of 'item_2', image of 'item_2'#</div></p>

在这里试试： http://jsfiddle.net/5APhT/2/

我如何进行自我链接<div>？</div>

2 个答案: