Swap Несколько путей к файлу с таким же именем класса

Я пытаюсь изменить путь к файлу изображения в зависимости от ширины экрана. Я получил его для работы до тех пор, пока путь к файлу изменится, но он ТОЛЬКО влияет на первый элемент в том смысле, что он изменяет ВСЕ пути файлов к одному и тому же.Swap Несколько путей к файлу с таким же именем класса

Когда я просматриваю свой код в браузере, оба изображения 1 и изображение 2 заменяются на src="Images/image.jpg". Может ли кто-нибудь помочь мне в определении того, что мне нужно сделать/изменить, чтобы он мог влиять на элемент КАЖДЫЙ с именем класса «swap-image» однозначно?

Как и измените

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

src="Images/tablet/image.jpg" 
src="Images/tablet/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

Мы основываем имя файла на текущем элементе в цикле и привязываем к нему eventlistener.

$(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

Swap Несколько путей к файлу с таким же именем класса

ответ

Смежные вопросы