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

操作DOM：如何在使用javascript调整窗口大小时删除和添加图像

1 个答案: