Question

抬头：我对Javascript很陌生，到目前为止只编写了基于jQuery的非常基本的脚本。我虽然快速学习..

我所追求的是一种方式：

1）识别标签

2）阅读img标签

3）使用<a href>标签包装标签，其中包含基于img的src的动态链接。

示例：

<img src="../../img_T/Culture/C_01/c_01_abb_005.jpg" width="310" height="180" alt="image1">

应该成为

<a href="../../img_L/Culture/C_01/c_01_abb_005.jpg"><img src="../../img_T/Culture/C_01/c_01_abb_005.jpg" width="310" height="180" alt="C 01 Abb 005"></a>

我正在考虑读取每个图像的src并将其写入变量，然后读取该变量并将/ img_T /替换为/ img_L /然后将其写入新变量，然后可以将其简单地添加到每个变量中HREF。

这是我已经走了多远，但这根本不起作用：

/* in the comments 'xxx' represents a different unique image string */
/* This should get the <img src="../img_T/xxx" /> string as text and store it. */
var $imgSrc        =    $(".displaywrapper img").attr("src");

/* This part should use the above sourced <img src="../img_T/xxx" string and replace ../img_T/ of the src with ../img_L/ and store it in var = imgLink. */
var imgLink        =    $imgSrc.text().replace("img_T","img_L");

/* This part should then wrap the <img src="../img_T/xxx" /> so it becomes <a href="..img_L/xxx"><img src="../img_T/xxx" /></a> */
$(".displaywrapper img").each(function(){.wrap("<a href="imgLink"></a>")});

感谢阅读。 Jannis

Answer 1

我认为这应该可以解决问题：

$(document).ready(function() {
    $(".displayWrapper img").each(function() {
        var src = $(this).attr('src').replace('img_T','img_L');
        var a = $('<a/>').attr('href', src);
        $(this).wrap(a);
    });
});

第1行：在执行任何操作之前等待文档to be ready 第2行：使用jQuery的each函数遍历每个图像第3行：使用attr获取当前图片的src，并将img_T替换为img_L
第4行：Dynamically create新的<a>代码，并将其href属性设置为第3行中的src 第5行：wrap <a>附近的<img标记＆gt;标签

Answer 2

如果您只需要点击图像，请执行以下操作：

$(".displayWrapper img").click(function(){
  document.location.href = this.src.replace("img_T", "img_L");
});

JS / jQuery：如何自动换行<a href=""> tags around <img/>s with the href being dynamic based on the img src?</a>

2 个答案: