条件にしたがってimgソースをチャンスする

HTML要素の属性を取得することについて理解していないことがあります。自分自身を開発するための小さなプロジェクトがあります。imgソース要素を取得する必要があります。 data-tabletまたはdata-mobilまたはdata-webワイドスクリーンでimgソースを変更するには、imgソースがchancing.What私のミスですか？条件にしたがってimgソースをチャンスする

私は何をしようとしていますか？私は、彼らが

編集適用される属性>=768pxため<768pxとdata-webため<480pxdata-mobilための3つのデータ - 属性data-mobilを持っています。編集2実際の解像度に応じて

を：私はsrcsetをチェックするが、これは私のものではありません話about..my質問は、私がdekstopに、モバイルやタブレットがされる別の画像に意味画像srcをchancingさ

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); 
}

のように編集

代わりのような長いget関数を書くべきです

出典

2017-02-07 08:46:56 Kenny

はい、でも私の条件は多分私のget関数が間違っている（私はjqueryを勉強しようとしています） –

あなたに適している場合は別の質問もあります。または私は別の方法を使用する必要がありますか？ –

jqueryを使用している限り、.eachはDOM要素をループするのが最善です。私の知る限りでは、あなたがどのように使ったかは、正しい方法です。それに問題はありません – Kenny

条件にしたがってimgソースをチャンスする

答えて

関連する問題