操作DOM：使用javascript調整窗口大小時如何刪除和添加圖像

Question

我目前正在創建一個網站，其內容比例為60-40。 每行圖片40％，每行文本60％。 我調整了媒體查詢以在移動時完全隱藏圖片，因為由於頁面結構，否則它們以錯誤的順序出現。 但是我想返回移動設備的圖像，因此我創建了空的div：s，如果窗口尺寸較小，我想在其中返回圖像。 我設法用這段代碼做到了這一點，但是當頁面重新調整為正常大小時，我很難刪除這類新的圖像。 相反，它們與原始圖像保持60-40結構。 誰能幫我？ 到目前為止，我已經將jQuery作為文檔的目標，找到了.mobi-img類，並為他們使用了removeClass（）方法，但是它似乎不起作用。

// Add images to mobile

var addImages = function () {
if ($(window).width() < 480 ) {

    if ($('.mobi-img').length === 0) {

    //add first section pictures to mobile
    document.getElementById('image1').innerHTML += '<img src="images/final/mobi_img1.png" alt="" class="mobi-img" style="max-width: 200px">';
    document.getElementById('image2').innerHTML += '<img src="images/final/mobi_img2.png" alt="" class="mobi-img" style="max-width: 200px">';
    document.getElementById('image3').innerHTML += '<img src="images/final/mobi_img3.png" alt="" class="mobi-img" style="max-width: 200px">';
    document.getElementById('image4').innerHTML += '<img src="images/final/mobi_img4.png" alt="" class="mobi-img" style="max-width: 200px">';
    //add second section pictures to mobile
    document.getElementById('image5').innerHTML += '<img src="images/final/mobi_img5.png" alt="" class="mobi-img" style="max-width: 200px">';
    document.getElementById('image6').innerHTML += '<img src="images/final/mobi_img6.png" alt="" class="mobi-img" style="max-width: 200px">';
    document.getElementById('image7').innerHTML += '<img src="images/final/mobi_img7.png" alt="" class="mobi-img" style="max-width: 200px">';
    document.getElementById('image8').innerHTML += '<img src="images/final/mobi_img8.png" alt="" class="mobi-img" style="max-width: 200px">';
  }
}

}

我嘗試了許多代碼來解決此問題：

else if ($(window).width() > 480 {
  if ($('.mobi-img').length > 0) {
  $('mobi-img').removeClass();
  // var mobilePictures = document.querySelectorAll('mobi-img');
  // $('.mobi-img').remove(mobilePictures);
}

}

Answer 1

首先選擇器$('mobi-img')是錯誤的，應該是$('.mobi-img') 。 然后，您在調用removeClass時沒有傳遞任何類作為參數，因此無論選擇器如何，調用都將無用。 如果只想刪除這些圖像，則所需的代碼是：

$('.mobi-img').remove();