Question

我必须构建一个具有多种颜色选项的网站，但它还必须能够提供“缩放”印象。这就是为什么我需要页面上的所有图像，以便我能够增加它们的大小。

我遇到的唯一问题是我不确定如何通过一个链接为页面上的所有图像添加特定前缀。

E.G。单击粉红色/白色，它会为页面上的所有图像添加前缀_pw ..

任何帮助都会很棒

Answer 1

// 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;
})

Answer 2

到目前为止发布的其他解决方案仍有效，但效率极低。这是一个更好的解决方案：

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;
});

这假设所有图片都具有相同的.jpg扩展名。

或者，您可以使用.attr代替.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;
});

Answer 3

$('IMG').attr('class','_pw');

应将所有IMG的类名设置为“_pw”。

即：

$('#mybutton').click(function(){
   $('IMG').attr('class','_pw');
});

Answer 4

可能有更简洁的编写方式，但它仍然是一个简单的操作：

 $('#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.
      });
 });

可能需要对上面的内容进行一些修改才能将后缀放在src字符串的正确位置，但是你明白了。（基本上，确保扩展程序被移动等）

Answer 5

$("img").attr('src', function(i,a) {
    return a + '_pw';
});

通过一个链接JQuery交换页面上的所有图像

5 个答案: