操作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();