如何在调整大小时附加/删除元素而不复制它们

How to append/remove elements on resize without duplicating them

本文关键字：元素 删除 复制 调整 小时      更新时间：2023-11-05

UPDATE这就是我不使用媒体查询的原因：该网站是一个视差网站，每个div中有大约60-70个单独的图像。最初我使用直接的媒体查询对该网站进行编码，但最终无法工作，因为该网站在3G连接上的加载速度非常慢。现在我正在做的是，我已经创建了5个屏幕截图，所有元素都在它们的最终位置，我将这些设置为默认情况下div的背景图像。然后，如果检测到屏幕宽度超过1100px（假设互联网连接更快），它将删除背景图像，并将所有单独的资产附加到div中。（如果有更好的方法来实现这一点，请告诉我）。

我有一个视差网站，如果浏览器宽度为1100px或更大，它会使用jQuery将元素添加到幻灯片div中，如果窗口大小小于1100px，它会用另一个函数清空这些div。我正在尝试设置它，以便在调整浏览器大小时，元素将自动附加和清空。下面是一个附加函数的例子：

function appendElements() {
    //swap in desktop content
    if (window.matchMedia("(min-width: 1100px)").matches) {
    jQuery("#bg_container").append("'
        <div id='BG' class='bg_images' data-stellar-ratio='.5'>'
            <img src='img/bg/bg1.png'/>'
        </div>'
    ");
}
appendElements();

这里有一个空函数的例子：

function emptyContainers() {
    if (window.matchMedia("(max-width: 1099px)").matches) {
        jQuery("#bg_container").empty();
    }   
}

我在调整大小事件中添加了emptyContainers函数：

jQuery(window).resize(function(){
    emptyContainers();   
});

这是正常的，如果我的浏览器以1100+px的宽度开始，它会正确地显示附加的资产，然后如果我将浏览器的大小调整到1100以下，它会从容器中删除资产。问题又反过来了。如果我试图将大小从1100以下调整到1100以上，则不会重新添加元素。

我也尝试将appendElements函数添加到resize事件中，但这导致所有元素都重复，因此页面上每个元素都有多个实例。

有什么想法吗？提前感谢！

尝试在代码中添加一行以检查元素是否存在。如果不是，则添加它。如果是，则不执行任何操作。

function appendElements() {
//swap in desktop content
if (window.matchMedia("(min-width: 1100px)").matches) {
  if($("#BG").length == 0){
    jQuery("#bg_container").append("'
      <div id='BG' class='bg_images' data-stellar-ratio='.5'>'
          <img src='img/bg/bg1.png'/>'
      </div>'
    ");
  }
}
appendElements();

媒体提问是显而易见的答案，但他对避免媒体提问发表了评论。

删除容器时，将布尔标志设置为true，将它们重新添加时设置为false。虽然以下内容将按照您的要求进行，但我强烈建议在可行的情况下进行纯媒体查询。它们是一种更清洁的解决方案。

var containersRemoved = False;
jQuery(window).resize(function(){
  if (window.matchMedia("(min-width: 1100px)").matchescontainersRemoved) {
    if(containersRemoved){
      appendElements();
      containersRemoved = False;
    }
  }else{
     if(!containersRemoved){
       emptyContainers();
       containersRemoved = True;
     }
  }   
});
function appendElements() {
  jQuery("#bg_container").append("'
    <div id='BG' class='bg_images' data-stellar-ratio='.5'>'
      <img src='img/bg/bg1.png'/>'
    </div>'
  ");
}
function emptyContainers() {
  jQuery("#bg_container").empty();  
}

Like Doorknob说最好的方法可能是使用纯媒体查询。根本不要更改dom，只需根据屏幕宽度选择显示的数量即可。

类似的东西

#bg_container bg_images {
    display: none;
  }
@media all and (min-width: 1100px) {
  #bg_container bg_images {
    display: block;
  }
}

更好的是，您可以使用根据大小选择显示的数量

#bg_container bg_images {
    display: none;
  }
@media all and (min-width: 500px) {
  #bg_container bg_images:nth-child(-n+2){ // change 2 to howevermany you want
    display: block;
  }
}    
@media all and (min-width: 1100px) {
  #bg_container bg_images {
    display: block;
  }
}
相关文章：