JS / jQuery: как я могу автоматически обернуть теги <a href> вокруг <img /> с динамическим значением href на основе img src? - PullRequest
Новая
       22

JS / jQuery: как я могу автоматически обернуть теги <a href> вокруг <img /> с динамическим значением href на основе img src?

4 голосов
/ 24 февраля 2009

Heads up: я довольно новичок в Javascript и до сих пор написал только очень простые сценарии, основанные на jQuery. Я быстро учусь, хотя ..

Что мне нужно, так это способ:

1) идентифицировать теги

2) читать теги img

3) обернуть тег тегом <a href> с динамической ссылкой на основе src img.

Пример: 

<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>

Я думаю, что чтение источника каждого изображения и запись его в переменную, затем чтение этой переменной и замена / 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

Ответы [ 2 ]

21 голосов
/ 24 февраля 2009

Я думаю, что это должно сработать: 

$(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: получить src текущего изображения с attr и заменить img_T на img_L
Строка 4: Dynamically create новый тег <a> и установите для его атрибута href значение src в строке 3
Строка 5: wrap тег <a> вокруг тега <img>.

3 голосов
/ 24 февраля 2009

Если вам нужно, чтобы изображения были активными, сделайте следующее: 

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