Swap all images on page via one link JQuery
I have to build a site that has multiple color options but it also has to have the ability to give the 'Zoom' impression. This is why I need all images on page so I am able to increase their size.
The only problem I have is I am not sure how t开发者_运维百科o add a certain prefix to all images on the page via one link.
E.G. Click Pink/White and it adds a prefix _pw to all images on the page..
Any help would be great
The other solutions posted so far work, but are horribly inefficient. Here’s a better solution:
var isZoom = false;
$('#some-link').click(function(e) {
e.preventDefault();
$('img').each(function() {
this.src = isZoom ? this.src.replace('_pw.jpg', '.jpg') : this.src.replace('.jpg', '_pw.jpg');
});
isZoom = !isZoom;
});
This assumes that all images have the same .jpg
extension.
Alternatively, you could use .attr
instead of .each
:
var isZoom = false;
$('#some-link').click(function(e) {
e.preventDefault();
$('img').attr('src', function(i, src) {
return isZoom ? src.replace('_pw.jpg', '.jpg') : src.replace('.jpg', '_pw.jpg');
});
isZoom = !isZoom;
});
// Get all your zoomable images (maybe with some special class to identify them)
// Iterate over them
$('img.specialClass').each(function() {
// Get original src attribute
var origSrc = this.src;
// Split by slash
var arraySrc = origSrc.split('/');
// New src attribute is:
var newSrc = arraySrc.slice(0,-1).join('/') + // all but last parts of URL
'/pw_' + // with a new prefix
arraySrc.slice(-1); // and the original file name
// Finally, set the new src attribute
this.src = newSrc;
})
There's probably a more concise way of writing it, but it's a simple operation nonetheless:
$('#pinkButton').click(function()
{
$('img').each(function()
{
$(this).attr('src', $(this).attr('src') + '_pw');
// Will take the previous src attribute and add '_pw' in the end.
});
});
There will probably need to be some modification to the above to put the suffix in the right spot of the src string, but you get the idea. (basically, making sure the extension gets moved, etc)
$("img").attr('src', function(i,a) {
return a + '_pw';
});
$('IMG').attr('class','_pw');
Should set all IMG's classnames to "_pw".
i.e:
$('#mybutton').click(function(){
$('IMG').attr('class','_pw');
});
精彩评论