Question

我有两个按钮，显示两种类型的图库视图。当我点击横向按钮时，我想循环抛出图库div中的所有图像并删除＆＃39; _500x500_acf_cropped＆＃39;部分来源。然后，如果我点击网格按钮，我想将其添加回源，允许我切换两个视图。

最好的方法是什么？我的脚本有效，但它复制了第一个img src并将它们全部替换为我想要发生的事情

<button class="grid"><img src="grid.png" alt="Grid View" /></button>
<button class="landscape"><img src="grid-landscape.png" alt="Landscape View" /></button> 

<section class="gallery">
 <div class="row">
  <div class="gallery-image col-md-4"><a href="2017/05/2014-044-192-819x1024.jpg" target="_blank" data-toggle="lightbox" data-gallery="gallery"><img src="2017/05/2014-044-192_500x500_acf_cropped.jpg" alt="" /></a></div>
  <div class="gallery-image col-md-4"><a href="2017/05/2014-002-086-1024x680.jpg" target="_blank" data-toggle="lightbox" data-gallery="gallery"><img src="2017/05/2014-002-086_500x500_acf_cropped.jpg" alt="" /></a></div>
  <div class="gallery-image col-md-4"><a href="/2017/05/2014-002-084-1024x680.jpg" target="_blank" data-toggle="lightbox" data-gallery="gallery"><img src="2017/05/2014-002-084_500x500_acf_cropped.jpg" alt="" /></a></div>
 </div>
</section>
<script>
$(".landscape").click(function(){
var fullimgurl = $('.gallery-image img').attr('src');
fullimgurl = fullimgurl.replace('_500x500_acf_cropped','');
$(.gallery-image img).attr("src", fullimgurl);
});
</script>

Answer 1

这应该做你想要的。

＆＃13;

send: GET / HTTP/1.1
      Accept-Encoding: identity
      Host: www.example.com
      Connection: close

reply: HTTP/1.1 200 OK
header: Date: Mon May 22 2017 12:21:31 GMT
header: Cache-Control: private
header: Content-Type: text/html; charset=ISO-8859-1

＆＃13;

document.querySelector('.landscape').addEventListener('click',()=>{
  document.querySelectorAll('.gallery-image img').forEach(function(el){
    var fullimgurl = el.src
    fullimgurl = fullimgurl.replace('_500x500_acf_cropped','');
    el.src = fullimgurl;
  })
})

＆＃13;

（另外，您的＆＃34; $（。gallery-image img）＆＃34;）中缺少引号

使用Jquery单击时删除/添加图像src的一部分

1 个答案: