特定の属性を持たないDOM要素を非表示にする

Question

data-web-src属性を持たないすべての画像を767pxで非表示にしたい。私は以下を試みたが、失敗した。どうやってやるの？

$('#homepage-carousel .lazy_res').each(function(index, value) { 
 
    var ws = $(window).width(); 
 
    var large = 1024; 
 
    var medium = 767; 
 
    var small = 0; 
 
    if (ws <= medium) { 
 
    $(this).not('[data-web-src]').hide(); 
 

 
    } else { 
 
    $(this).not('[data-web-src]').show(); 
 
    } 
 

 
});

img { 
 
    width: 500px; 
 
    float: left; 
 
    margin-right: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="homepage-carousel"> 
 
    <img class="lazy_res" src="http://pre07.deviantart.net/338a/th/pre/i/2012/007/f/7/mapa_mundi_com_bandeiras___preto_by_plamber-d4leocd.jpg" alt="" /> 
 

 
    <img class="lazy_res" src="http://img05.deviantart.net/a6be/i/2013/099/8/9/helena_harper_by_plamber-d6125tx.jpg"> 
 
</div>

Codepen Demo

Answer 1

これはCSS Media Queriesで行われるべきです。 JavaScriptは必要ありません。

/* Set page default styles and styles that should only 
 
    be in effect for viewports under 767px wide here. */ 
 

 
img { 
 
    width: 500px; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
/* Apply the following CSS only to viewports wider than 767px */ 
 
@media (min-width: 767px) { 
 
    /* Select all images except those with an attribute of: dat-web-src */ 
 
    img:not([data-web-src]) { 
 
    display: none; /* Hide the matching elements */ 
 
    } 
 
    
 
    /* Make any other CSS changes you like here */ 
 
    
 
    /* This class will only be applied to images when the media query 
 
    is in effect. */ 
 
    img.someNewClass { 
 
    /* Whatever you need here */ 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="homepage-carousel"> 
 
    <img class="lazy_res" src="http://localhost:82/works/anitur/img/slider/1.jpg" alt="" /> 
 

 
    <img class="lazy_res" src="http://localhost:82/works/anitur/img/assets/mice-1.jpg"> 
 
</div>

Answer 2

あなたは関数内のコードを設定する必要がありますし、それをテストするためにonloadともonresizeを呼び出すことができます。

https://api.jquery.com/on/
説明を参照してください： 1つまたは複数のイベントハンドラ関数をアタッチする選択された要素へのより多くのイベント。

function testit() { 
 
    $("#homepage-carousel .lazy_res").each(function(index, value) { 
 
    var ws = $(window).width(); 
 
    var large = 1024; 
 
    var medium = 767; 
 
    var small = 0; 
 
    if (ws <= medium) { 
 
    $(this).not('[data-web-src]').hide(); 
 

 
    } else { 
 
    $(this).not('[data-web-src]').show(); 
 
    } 
 
    }); 
 
} 
 

 
$(window).on('resize load', testit);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
below 767px wide, you'll see nothing else here :), use the full page mode to test the snippet. then resize the window 
 
<div id="homepage-carousel"> 
 
<img class="lazy_res" src="http://pre07.deviantart.net/338a/th/pre/i/2012/007/f/7/mapa_mundi_com_bandeiras___preto_by_plamber-d4leocd.jpg" alt="" /> 
 

 
    <img class="lazy_res" src="http://img05.deviantart.net/a6be/i/2013/099/8/9/helena_harper_by_plamber-d6125tx.jpg"> 
 
</div>

https://codepen.io/gc-nomade/pen/EXLZEN