仅更改图像SRC属性的一部分,但保留文件编号

时间:2013-05-11 13:15:36

标签: jquery

我需要一些关于jQuery的帮助:

HTML

    <div id="container">
     <div class="flexslider woodslider"> 
      <ul id="woods" class="slides">
        <li><img src="products/drewno/dab/1.jpg" /></li>
        <li><img src="products/drewno/teak/2.jpg" /></li>
        <li><img src="products/drewno/sosna/3.jpg" /></li>
        <li><img src="products/drewno/dab/2.jpg" /></li>
        <li><img src="products/drewno/teak/1.jpg" /></li>
      </ul>
     </div>

      <div class="flexslider woodslider"> 
      <ul id="hands" class="slides">
        <li><img src="products/drewno/teak/1.jpg" /></li>
        <li><img src="products/drewno/teak/2.jpg" /></li>
        <li><img src="products/drewno/teak/3.jpg" /></li>
        <li><img src="products/drewno/teak/2.jpg" /></li>
        <li><img src="products/drewno/teak/1.jpg" /></li>
      </ul>
     </div>

       <div class="flexslider woodslider"> 
      <ul id="decors" class="slides">
        <li><img src="products/drewno/sosna/1.jpg" /></li>
        <li><img src="products/drewno/sosna/2.jpg" /></li>
        <li><img src="products/drewno/sosna/3.jpg" /></li>
        <li><img src="products/drewno/sosna/2.jpg" /></li>
        <li><img src="products/drewno/sosna/1.jpg" /></li>  
      </ul>
     </div> 
    </div>

    <!-- empty holder for dynamic image. -->
    <div id="rightside">
    <img src="" />
    </div>

的JavaScript

$(window).load(function(e) {

      // image selected in first ul tag  
      var currentWood = $('#woods li img');
      currentWood.click(function(){

        // Get name of current clicked image
        var src = $(this).attr('src');  // full path
        var tarr = src.split('/');      //split path
        var file = tarr[tarr.length-2]; //get part of path
        var nums = tarr[tarr.length-1];
        var data = file.split('.')[0];  

        // last ul tag 
        // iterate over all images, and change path ( directory name - currentWood )

        $('#decors li img').each(function(){

          // this is problematic.
          // Images have got proper path ( dir name) but all have the same 
          // extension (n.jpg)
          $(this).attr('src', 'products/drewno/'+data+'/'+nums);  
          $(this).each(function() {
          var woodColor = $(this).attr('src');
          $('#rightside img').attr('src', woodColor);
          ///alert ($(this).attr('src'));
          });
        });       
      });// End of getting wood color info  
    }); // End of document ready

我想要的只是点击第一个#woods ul标签上的图片,获取此图片的路径(我需要大多数目录名称(dab,teak或sosna)并在图片中使用此部分目录名称 #decors ul img.

它主要完成,但#decors ul中的图像都具有相同的文件编号。 如何将变量nums更改为单击#woods img的当前文件编号?

0 个答案:

没有答案