スワップ同じクラス名を持つ複数のファイルパス

画面の幅に応じて画像のファイルパスを変更しようとしています。ファイルパスが変更される限り動作するようになっていますが、すべてのファイルパスを同じパスに変更するという点で最初の要素にのみ影響します。スワップ同じクラス名を持つ複数のファイルパス

ブラウザでコードを表示すると、画像1と画像2の両方がsrc="Images/image.jpg"に置き換えられます。クラス名「swap-image」を持つすべての要素に一意に影響を与えるためには、誰かが私が行う必要があることを識別するのに役立つでしょうか？

ようで、

src="Images/tablet/image.jpg" 
src="Images/tablet/image1.jpg"

に

src="Images/image.jpg" 
src="Images/image1.jpg"

を変更するには、事前にありがとうございます。

<body> 
    <img class="swap-image" src="Images/image.jpg" /> 
    <img class="swap-image" src="Images/image1.jpg" /> 

    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     $(document).ready(function() { 

      var swapImageClass = document.getElementsByClassName("swap-image"); 
      var i; 
      for (i = 0; i < swapImageClass.length; i++) { 

       var src = $(swapImageClass).attr('src'); // "Images/image.jpg" 
       var tarr = src.split('/');  // ["static","Images","banner","image.jpg"] 
       var file = tarr[tarr.length - 1]; // "image.jpg" 
       var data = file.split('.')[0]; // "image" 

       $(window).on('load resize', function() { 
        $(swapImageClass).each(function() { 
         if ($(window).width() > 1025) { 
          $(swapImageClass).attr('src', 'Images/' + file); 
         } 
         else if ($(window).width() > 481 && $(window).width() < 1024) { 
          $(swapImageClass).attr('src', 'Images/tablet/' + file); 
         } 
         else if ($(window).width() > 0 && $(window).width() < 480) { 
          $(swapImageClass).attr('src', 'Images/mobile/' + file); 
         } 
        }); 
       }); 
      }; 

     }); 
    </script> 
</body>

出典

2016-07-29 LNifred

ループの現在の要素に基づいてファイル名を設定し、それにイベントリスナーをバインドします。

$(document).ready(function() { 
    var swapImageClass = $('.swap-image'); 

    swapImageClass.each(function(index) { 
     var filename = $(this).attr('src').split('/').pop(), 
      img = $(this); 

     $(window).on('load resize', function() { 
      var w = $(window).width(); 

      if (w > 1025) { 
       img.attr('src', 'Images/' + filename); 
      } else if (w > 481 && w < 1024) { 
       img.attr('src', 'Images/tablet/' + filename); 
      } else if (w > 0 && w < 480) { 
       img.attr('src', 'Images/mobile/' + filename); 
      } 
     }); 
    }); 
});

出典

2016-07-29 09:40:47

jqueryを使用している場合は、単にクラス名とeach()ループを使用することができます。ただ、ここにコードを修正し

$(window).on('load resize', function() { 
       $(".swap-image").each(function() { 
        var src = $(this).attr('src'); // "Images/image.jpg" 
         var tarr = src.split('/');  // ["static","Images","banner","image.jpg"] 
         var file = tarr[tarr.length - 1]; // "image.jpg" 
        if ($(window).width() > 1025) { 
         $(this).attr('src', 'Images/' + file); 
        } 
        else if ($(window).width() > 481 && $(window).width() < 1024) { 
         $(this).attr('src', 'Images/tablet/' + file); 
        } 
        else if ($(window).width() > 0 && $(window).width() < 480) { 
         $(this).attr('src', 'Images/mobile/' + file); 
        } 
       }); 
      });

ここでチェックこの機能をhttps://jsfiddle.net/7619099p/

出典

2016-07-29 09:44:28

、この予想されたのですか？

$(document).ready(function(e) { 
     //Here we are saving the file name as a data attribute to each images 
     $(".swap-image").each(function(index, element) { 
      var tarr = $(element).attr("src").split('/'); 
      var file = tarr[tarr.length - 1]; 
      $(element).data("filename",file);    
     }); 

     $(window).on('load resize', function() { 
      $(".swap-image").each(function() { 
      // and here we are using the saved data attribute(filename) for new path [$(this).data("filename")] on resize.This will give you individual new paths based on screen resolution. 
        if ($(window).width() > 1025) { 
         $(swapImageClass).attr('src', 'Images/' + $(this).data("filename")); 
        } 
        else if ($(window).width() > 481 && $(window).width() < 1024) { 
         $(swapImageClass).attr('src', 'Images/tablet/' + $(this).data("filename")); 
        } 
        else if ($(window).width() > 0 && $(window).width() < 480) { 
         $(swapImageClass).attr('src', 'Images/mobile/' + $(this).data("filename")); 
        } 
       }); 
      }); 

    });

出典

2016-07-29 09:49:50 FvZ

スワップ同じクラス名を持つ複数のファイルパス

答えて

関連する問題