Chancing img source в соответствии с условием

Есть что-то, что я не понимал, это получение атрибута элемента html. У меня есть небольшой проект, чтобы развить себя, и мне нужно получить исходный элемент img, это пока что okey, но всякий раз, когда я хочу для изменения источника img с data-tablet или data-mobil или data-web на большом экране моего источника img не chancing.What является моей ошибкой?Chancing img source в соответствии с условием

Что я пытаюсь сделать? У меня есть три DATA- атрибут data-mobil для <480pxdata-mobil для <768px и data-web для >=768px они атрибут будет применяться

редактирования: в соответствии с разрешением на самом деле

Edit 2: проверить srcset, но это не то, что я говорить about..my вопрос нечаянно SRC изображения я имею в виду на Dekstop и на мобильных или таблетки будут различными изображениями

please click to see my project on codepen

$(function(){ 
 
    
 
    $(".box img").each(function(){ 
 
    var getWeb = $(this).parents(".box").find("img").attr("data-web"); 
 
    var getTablet = $(this).parents(".box").find("img").attr("data-tablet"); 
 
    var getMobil = $(this).parents(".box").find("img").attr("data-mobil"); 
 

 
    if ($(window).width() < 768) { 
 
     $(this).attr("data-src",getTablet); 
 
    }else if ($(window).width() < 480){ 
 
    $(this).attr("data-src",getMobil); 
 
    }else if ($(window).width() > 480){ 
 
     $(this).attr("data-src",getTablet); 
 
    }else if($(window).width() > 768) 
 
    { 
 
    $(this).attr("data-src",getWeb); 
 
    } 
 
    }); 
 
})

.box{ 
 
    margin:10px; 
 
    float:left; 
 
} 
 
.box img{ 
 
    width:300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script> 
 
</head> 
 
<body> 
 
    
 
    <div class="box"> 
 
    <img data-src="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2017/01/31/09/30/raspberry-2023404_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2017/01/20/15/12/ring-nebula-1995076_960_720.jpg" class="lazyload" /> 
 
    </div> 
 
    
 
    
 
    <div class="box"> 
 
    <img data-src="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2014/06/29/12/46/apple-379373_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2016/02/21/00/29/fruit-1213041_960_720.jpg" class="lazyload" /> 
 
    </div> 
 
    
 
    
 
</body> 
 
</html>

источник

2017-02-07 ani_css

вы пытаетесь достичь чего-то самым сложным способом. поскольку вы добавили тег css к своему вопросу, вы можете легко использовать медиа-запросы для своей цели. – Khaleel

, но изображения будут динамически, и я не буду изображать один и тот же изображение. –

Вы не против атрибута srset? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img –

Ваш, если условия не правы

условия должны быть как

if ($(window).width() > 768) { 
    $(this).attr('src', getWeb); 
} else if ($(window).width() < 768 && $(window).width() > 480) { 
    $(this).attr('src', getTablet); 
} else if ($(window).width() < 480) { 
    $(this).attr('src', getMobil); 
}

Редактировать

Вместо того, чтобы писать такую функцию долго ПОЛУЧИТЬ вы можете написать

var getWeb = $(this).attr("data-web"); 
var getTablet = $(this).attr("data-tablet"); 
var getMobil = $(this).attr("data-mobil");

источник

2017-02-07 08:46:56 Kenny

да, но я думаю, что не только мои условия, возможно, моя функция get тоже не так (я пытаюсь научиться jQuery) –

спасибо У меня есть еще один вопрос, если вы подходящий. или мне нужно использовать другой способ? –

Пока вы используете jquery, .each лучше всего зацикливать на элементах DOM. По моим сведениям, как вы использовали .each, это правильный способ. Нет проблем в нем – Kenny

Chancing img source в соответствии с условием

ответ

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