Part of my HTML Code is created according to my javascript code, more precisely the attributes of tag <a>
( href
and title
).
I'm trying to create a HTML title
inside <a>
so I can have the mouseover effect, and present the Title and Description.
According to my javascript code, myTitle
array will have the Title for every image, and will be displayed according to its position...
HTML CODE
<a href="../test/top.php?title=sample1.mp4" title="Título 1 Descript 1">
<img style="z-index: 20; position: absolute; left: 365px; top: 63px; width: 189px;" src="spiral/sample1.jpg">
</a>
<a href="../test/top.php?title=sample2.mp4" title="Título 1 Descript 1" >
<img style="z-index: 17; position: absolute; left: 674px; top: 60px; width: 155px;" src="spiral/sample2.jpg">
</a>
JAVASCRIPT CODE
var myTitle = ["Title 1", "Title 2", "Title 3"];
var myDescr = ["Desc 1", "Desc 2", "Desc 3"];
$('img').wrap(function(){
return $('<a>').attr({
href:
'../test/top.php?title=' + this.src, title: myTitle[0] + "\n" + myDescr[0]
})
});
The problem now, is that I can't create a for
cycle inside the attr
and so I can't print myTitle[0], myTitle[1] and myTitle[2] for every image...
Any ideas you can I bypass this problem?
Note that the myTitle
an myDescr
arrays are variable, and IMAGES CAN BE REPEATED...
How about using .each()
?
$('img').each(function(i) {
$(this).wrap(function(){
return $('<a>').attr({
href: '../test/top.php?title=' + this.src, title: myTitle[i] + "\n" + myDescr[i]
});
});
});
You can do it this way, using the index argument in wrap callback function.
$('img').wrap(function (i) {
return $('<a>').attr({
href:
'../test/top.php?title=' + this.src,
title: myTitle[i] + "\n" + myDescr[i]
})
});
.wrap( function(index) )
If you want the title/desc to repeat through for repeating images try this way.
var myTitle = ["Title 1", "Title 2", "Title 3"];
var myDescr = ["Desc 1", "Desc 2", "Desc 3"];
$('img').wrap(function (i) {
var title = myTitle.shift(); //Get the top
myTitle.push(title); //push back for cycle
var descr = myDescr.shift();//Get the top
myDescr.push(descr);//push back for cycle
return $('<a>').attr({
href:
'../test/top.php?title=' + this.src,
title: title + "\n" + descr
})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.