Javascript .insertAfter（）与resize（）事件：如何避免重复

我需要根据width设备的大小在html中显示或不显示p标记

最快的解决方案是提供两个不同的类，如“desktop”和“mobile”，并根据媒体查询将它们显示为块或无

这个解决方案的问题是文本被两次转换成html，因此对于我的SEO来说这是一个问题：因此，我创建了一个小函数，使用.append、.appendTo和finally.insertAfter将文本插入到特定的div中，但没有圆满的结局：

函数resize（）{
if（jQuery（window）.width（）<934）{
jQuery（“示例文本”
）.insertAfter（“.main image block”）；
}否则{
jQuery（“底部文本”
”）.insertAfter（“.home main text”）；
}
}
调整大小（）；
jQuery（文档）.ready（函数（$）{
$（窗口）。打开（'调整大小'，调整大小）；
});

p标签被重复了一次又一次，但我想要它一次；我还想在页面上激活此调整大小，因此，如果用户调整窗口大小，他将永远不会看到两个文本，而只会看到一个文本，具体取决于实际窗口大小

---

非常感谢：）

这里不需要JS代码，因为您可以使用CSS媒体查询实现所需的功能

只需在可以查看的所有位置插入

元素，并将CSS设置为仅在初始状态下显示默认值，而隐藏另一个。然后，使用

@media

规则，当屏幕大小满足您的要求时，您可以显示备用屏幕。试试这个：

.main image block+p{显示：无；}
@介质（最大宽度：934px）{
.home主文本+p{显示：无；}
.main图像块+p{显示：块；}
}

主图像
埃森皮奥酒店

主干道
埃森皮奥酒店

---

如果您尝试调整JSFIDLE的输出帧的大小，您可以看到效果正在发挥作用。

为元素指定一个ID，并在插入新的ID之前删除它的所有出现：）

function resize（）{
jQuery（“#verySpecial”）.remove（）；
if（jQuery（window）.width（）<934）{
jQuery（“
示例文本）
”）.insertAfter（“.main image block”）；
}否则{
jQuery（“
底部文本）
”）.insertAfter（“.home main text”）；
}
}
调整大小（）；
jQuery（文档）.ready（函数（$）{
$（窗口）。打开（'调整大小'，调整大小）；
});
我认为@Roy McCrossan的媒体查询方式是最好的解决方案。但是，由于您需要一个JS解决方案（如果您需要根据屏幕大小做其他事情，那么它很有用），这就是问题所在

function resize() {
  if (jQuery(window).width() < 934) {
    //EACH TIME the window is resized to any width under 934 px, the <p> is created and inserted
    jQuery('<p>example text</p>').insertAfter('.main-image-block');
  } else {
    //EACH TIME the window is resized to any width over 934 px, the <p> is created and inserted
    jQuery('<p>bottom text</p>').insertAfter('.home-main-text');
  }

其他（更好的）选项是向
主体
或任何其他父元素添加类名，并使用CSS显示/隐藏元素

function resize() {
   if (jQuery(window).width() < 934) {
     jQuery("body").addClass("large-screen");
   } else {
     jQuery("body").removeClass("large-screen");
   }
 }

function resize（）{
if（jQuery（window）.width（）<934）{
jQuery（“body”）.addClass（“大屏幕”）；
}否则{
jQuery（“body”）.removeClass（“大屏幕”）；
}
}

另一个选项是跟踪调整大小，并仅在必要时执行更改，而不是每次触发
调整大小
。
此解决方案应适用于您：）

var mainImageBlock，homeMainText；
函数resize（）{
if（jQuery（window）.width（）<934）{
如果（！mainImageBlock）{
jQuery（'.home main text'）.remove（）；
jQuery（'testo di esempio
'）。插入后面（'.main image block'）；
mainImageBlock=true；
homeMainText=false；
console.log（“主图像块内部”）；
}
}否则{
如果（！homeMainText）{
jQuery（'.main image block'）.remove（）；
jQuery（'testo di esempio
）.insertAfter（'.home main text'）；
homeMainText=true；
mainImageBlock=false；
console.log（'insidehome main text'）；
}
}
}
函数初始化（）{
if（jQuery（window）.width（）<934）{
mainImageBlock=false；
homeMainText=true；
log（'initif'）；
}否则{
mainImageBlock=true；
homeMainText=false；
log（'init else'）；
}
调整大小（）；
}
初始化（）；
jQuery（文档）.ready（函数（$）{
$（窗口）。打开（'调整大小'，调整大小）；
});

小提琴：

console.log用于显示其工作状态；）可以删除

你说“我需要根据width设备的大小使一个p标记在html中可见或不可见。”那么你为什么要使用insertAfter呢？在他的描述中，他不想在标记中包含两个元素。
<div class="main-image-block">

</div>
<p id="example-text">example text</p>

<div class="home-main-text">

</div>
<p id="bottom-text">bottom text</p>

<script>

function resize() {
  if (jQuery(window).width() < 934) {
    jQuery("#example-text").show();
    jQuery("#bottom-text").hide();
  } else {
    jQuery("#example-text").hide();
    jQuery("#bottom-text").show();
  }
}
...

function resize() {
   if (jQuery(window).width() < 934) {
     jQuery("body").addClass("large-screen");
   } else {
     jQuery("body").removeClass("large-screen");
   }
 }

var mainImageBlock, homeMainText;
function resize() {
  if (jQuery(window).width() < 934) {
    if(!mainImageBlock){
      jQuery('.home-main-text').remove();
      jQuery('<p>testo di esempio</p>').insertAfter('.main-image-block');
      mainImageBlock = true;
      homeMainText = false;
      console.log('inside main-image-block');
    }
  } else {
    if(!homeMainText){
            jQuery('.main-image-block').remove();
      jQuery('<p>testo di esempio</p>').insertAfter('.home-main-text');
      homeMainText = true;
      mainImageBlock = false;
      console.log('inside home-main-text');
    }
  }
}

function initialize(){
    if(jQuery(window).width() < 934){
    mainImageBlock = false;
    homeMainText = true;
    console.log('init if');
  } else {
    mainImageBlock = true;
    homeMainText = false;
    console.log('init else');
  }
    resize();
}
initialize();

jQuery(document).ready(function($) {
  $(window).on('resize', resize);
});