将 img src 替换为 js jquery

Question

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

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

有：

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

这个需要整体申请cssclass；因为它是新闻源，所以会有新文章

这是我所在的位置：

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

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

imgArray.forEach(enlargeImageSrc);

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

Answer 2

试试这个 fiddle 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

尝试将鼠标悬停在按钮上会使带有 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 4

我为您编写了一个代码，其中我使用两个变量，一个用于大图像 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>

Answer 5

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

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>

将 img src 替换为 js jquery

Replace img src with js jquery

javascript

css

jquery

image

src