Question

我的Html标记就像这样

<div id="main">
    <div id="slider">
        <img src=""/>
    </div> 
    <div class="clear slider"></div>

    <div class="slider ndslider">
        <a href="#" rel="bookmark">
            <img src="#" title=""/>
        </a>
    </div>    

    <div class="slider rdslider">
        <a href="" rel="bookmark">
            <img src="" title=""/>
        </a>
   </div>       
<div class="slider thslider nivoSlider">
    <a rel="bookmark" href="" class="nivo-imageLink" >
        <img src="image src" >
    </a>
    <a rel="bookmark" href="" class="nivo-imageLink">
        <img title="" src="">
    </a>
    <a rel="bookmark" href="#" class="nivo-imageLink">
        <img title="" src="">
    </a>
    <div class="nivo-slice"></div>
    <div class="nivo-slice"></div>
    <div class="nivo-slice"></div>
    <div class="nivo-directionNav">
        <a class="nivo-prevNav">Prev</a>
        <a class="nivo-nextNav">Next</a>
   </div>
   <div class="nivo-controlNav">
        <a rel="0" class="nivo-control active">
            <img alt="" src="undefined">
        </a>
        <a rel="1" class="nivo-control">
            <img alt="" src="undefined">
       </a>
   </div>
</div>
</div>

我想找到这个DIV中的所有图像

<div class="slider thslider nivoSlider">

</div>

并将图像设置为此

<div class="nivo-controlNav">
      <a rel="0" class="nivo-control active">
          <img alt="" src="undefined">
      </a>
</div>

为了做同样的事情，我编写了我的自定义jQuery，但它没有用。

jQuery(document).ready(function() {
     jQuery('.thslider a img').each(function(){
            var imgSrc = jQuery(this).attr('src');
            var newSrc = 'http://saorabh-test1.rtcamp.info/wp-content/themes/twentyten/timthumb.php?src='+ imgSrc +' &h=50&w=50&zc=1';
            jQuery(".thslider .nivo-controlNav a img").attr('src',newSrc);

        });
    });

帮帮我......

Answer 1

<强> 更新

好的就是问题..您的原始网址包含图片的完整路径，因此您检索的src是一个完整的路径，而不是您在URL中作为参数传递的src属性..

将您的代码更改为此应该没问题

jQuery(document).ready(function() {
    jQuery('.thslider a img').each(function(index){
           var imgSrc = jQuery(this).attr('src');
           // now we replace the dimensions from the original url using regular expressions.. the 50 is the new dimensions .. change it appropriately..
           var newSrc = imgSrc.replace(/h=(.*?)&/gi,'h=50&').replace(/w=(.*?)&/gi,'w=50&');

           jQuery(".thslider .nivo-controlNav a:eq("+index+") img").attr('src',newSrc);
       });
   });

原始回答

究竟什么不起作用？

如果问题是所有目标图像都变为同一个图像，则将代码更改为

jQuery(document).ready(function() {
     jQuery('.thslider a img').each(function(index){
            var imgSrc = jQuery(this).attr('src');
            var newSrc = 'http://saorabh-test1.rtcamp.info/wp-content/themes/twentyten/timthumb.php?src='+ imgSrc +' &h=50&w=50&zc=1';
            jQuery(".thslider .nivo-controlNav a:eq("+index+") img").attr('src',newSrc);

        });
    });

Answer 2

在将imgSrc用作URI组件之前，您可能希望将+' &传递给encodeURIComponent()，同样，在imgSrc之后还有一个额外的空格字符，+'&应该只是{{1} }}

此外，您的初始选择器.thslider a img会为您提供所有img代码（包括缩略图），您可能希望将该选择器限制为.nivo-imageLink img。

此外，您要为src匹配的所有图像设置.thslider .nivo-controlNav a img属性，而不仅仅是具有相同索引编号的图像。

重新组合：

jQuery(function() { // shortcut for jQuery(document).ready(function() {
  jQuery('.thslider .nivo-imageLink img').each(function (idx) {
     // idx is the index of the image, use the same index for thumbs:
     var $thumb = jQuery(".thslider .nivo-controlNav a img").eq(idx);
     $thumb.attr('src', 'http://saorabh-test1.rtcamp.info/wp-content/themes/twentyten/timthumb.php?src='+ encodeURIComponent(this.src) +'&h=50&w=50&zc=1');
  });
});

Demo on jsfiddle

查找图像并放入另一个img源

2 个答案: