Question

我需要替换路径中的文件名。我找到了一些解决方案，但我不能让他们中的任何一个适应我的特殊情况。

我有三个元素可以在这里工作....

触发器图片：http://domainname.com/path/to/files/product_thumb_small/public/THUMB-1.jpg

替换后的图片：http://domainname.com/path/to/files/product_preview/public/PREVIEW-IMAGE.jpg

替换的href：http://domainname.com/path/to/files/product_full/public/FULL-IMAGE.jpg

所以我需要做的是当我将鼠标悬停在触发器图像上时，它会替换替换后的图像并替换href图像文件名，但保持路径不变。

所以当我将鼠标悬停在触发图像上时，例如：

<div class="product-img-thumb-small">
  <a title="" href="">
    <img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-4.jpg" />
  </a>
</div>

这样：

  <a class="cloud-zoom" href="http://domainname.com/path/to/files/product_full/public/FULL-IMAGE.jpg">
    <img src="http://domainname.com/path/to/files/product_preview/public/PREVIEW-IMAGE.jpg">
  </a>

成为这个：

  <a class="cloud-zoom" href="http://domainname.com/path/to/files/product_full/public/THUMB-4.jpg">
    <img src="http://domainname.com/path/to/files/product_preview/public/THUMB-4.jpg">
  </a>

这是我的HTML代码：

<div class="product-preview-wrapper">
  <div class="product-img-thumb">
    <div id="wrap">
    <a class="cloud-zoom" href="http://domainname.com/path/to/files/product_full/public/FULL-IMAGE.jpg">
    <img src="http://domainname.com/path/to/files/product_preview/public/PREVIEW-IMAGE.jpg">
    </a>
    </div>
  </div>
</div>
<div class="product-image-wrapper">
  <div class="item-list">
    <ul>
      <li class="first">
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-1.jpg" /></a></div>
      </li>
      <li>
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-2.jpg" /></a></div>
      </li>
      <li>
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-3.jpg" /></a></div>
      </li>
      <li>
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-4.jpg" /></a></div>
      </li>
      <li class="last">
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-5.jpg" /></a></div>
      </li>
    </ul>
  </div>
 </div>

我正在使用jQuery。到目前为止我有这个：

$('.product-image-wrapper .product-img-thumb-small img').hover(function () {

   var newImg = $(this).attr("src");
   $(".product-preview-wrapper a.cloud-zoom").attr("href",newImg); 
   $(".product-preview-wrapper a.cloud-zoom img").attr("src",newImg);

});

但问题在于路径..我不想要替换路径..只是图像文件名。

非常感谢任何帮助。

此致 ç

Answer 1

替换href元素中的cloud-zoom。试试这个：

$(".product-img-thumb-small img").mouseover(function(){
   var imgUrl = $(this).attr("src");
   $(".cloud-zoom").attr("href",imgUrl); 
   $(".cloud-zoom img").attr("src",imgUrl);
});

jsFiddle

Answer 2

我解决了这个问题：

$('.product-image-wrapper .product-img-thumb-small img').mouseover(function () {

        var preview = $('.product-preview-wrapper .product-img-thumb img');
        var previewPath = preview.attr('src').substring(0,preview.attr('src').lastIndexOf('/') +1 );
        var zoom = $('.product-preview-wrapper .product-img-thumb a.cloud-zoom');
        var zoomPath = zoom.attr('href').substring(0,zoom.attr('href').lastIndexOf('/') +1 );
        var imageName = $(this).attr('src').substring($(this).attr('src').lastIndexOf('/') +1);

       $(".product-preview-wrapper a.cloud-zoom").attr("href", zoomPath + imageName); 
       $(".product-preview-wrapper a.cloud-zoom img").attr("src", previewPath + imageName);

    });

如果有更好的方法，请告诉我。

jquery / javascript替换路径中的图像文件名

2 个答案: