用js jquery替换img src

Question

我的 CMS 中有一个新闻提要，它可以为提要提取预览图像和预告文本。图片都是缩略图@ 75x75px。我想让预览图像更大，但无法缩放那么小。

我想知道我需要运行什么 JS 来将所有 URL 替换为原始图像 src。

有：

需要将它们全部更改为以下内容 - 只是将 'thumb' 替换为 'large'：

这需要应用于整个css类；因为它是一个新闻源&会有新文章

这是我所在的位置：

function replaceImgSrc(img,imgTwo) {
var arr=[img,imgTwo];
for(i=0;i<arr.length;i++) 
    arr[i].each(
        function(i,e) {
            theImg=$(this),
            theImg.attr("src", 
                function(i,e) {
                    return e.replace("_thumb","_large")
                }
            )
        }
    )
}

Answer 1

如果新闻源包含在一个类中，请尝试这种方式。

function replaceImg($class) {
    $class.find("img").each(function(k, el) {
        var newSrc = $(el).attr("src").replace("_thumb", "_large");
        $(el).attr("src", newSrc);
    });
}

replaceImg($("#newsfeed"));

在您的 HTML 中，将新闻源代码包装在可识别的 DIV 中。

<div id="newsfeed"> {{place newsfeed code in here}} </div>

Answer 2

试试这个小提琴jsfiddle.net/bharatsing/wkh6da93/

这将找到页面中的所有图像并将其src更改为大图像。

$(document).ready(function(){           
    $("#btnLarge").click(function(){
    $("img").each(function(){
        var src=$(this).attr("src");
      src=src.replace("_thumb","_large");
      var src=$(this).attr("src",src);
    });
    });
});

Answer 3

如果假设您在数组var imgArray 中拥有所有img 元素，那么您可以遍历它们并更新src 属性，如下所示：

imgArray.forEach(enlargeImageSrc);

function enlargeImageSrc (image) {
  image.src = image.src.replace('_thumb', '_large');
}

Answer 4

尝试将鼠标悬停在按钮上会使带有 class="show" 的图像变大，一旦您移开鼠标，它们就会再次变小。

$("button").mouseenter(function (){
  var srcI = $(".show").attr("src");
  srcI = srcI.replace("thumb","large");
  $(".show").attr("src",srcI);
});
$("button").mouseleave(function (){
  var srcI = $(".show").attr("src");
  srcI = srcI.replace("large","thumb");
  $(".show").attr("src",srcI);
});

button{
  display:block;
}
img.show{
  max-width:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button>Click me</button>
  <img class="show" src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png"/>
</div>

Answer 5

我为您制作了一个代码，其中我获取两个变量，一个用于大图像 URL，一个用于小图像 URL。我创建了一个单击更改图像按钮的功能，您的图像 url 更改为大图像，它向您显示大图像，然后您再次单击该按钮，它将大图像更改为小图像。你也可以在这里看到这个的现场演示https://jsfiddle.net/Arsh_kalsi01/3s1uudhe/2/

 

   $(document).ready(function(){
var big_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_large.png";

var small_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png";


	$(document).on("click",".Changeimagetolarge",function(){
  var obj = $(this);
  	obj.removeClass('Changeimagetolarge');
    obj.addClass('Changeimagetosmall');
  	obj.next("img").attr('src',big_image);
  });
  
  
  $(document).on("click",".Changeimagetosmall",function(){
    var obj2 = $(this);
  	obj2.removeClass('Changeimagetosmall');
    obj2.addClass('Changeimagetolarge');
  	obj2.next("img").attr('src',small_image);
  });
  
  
  
  
  
});

<script
			  src="https://code.jquery.com/jquery-3.1.1.min.js"
			  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
			  crossorigin="anonymous"></script>
<div>

<button class="Changeimagetolarge">
Change Image
</button>
<img src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png">

</div>