Question

我需要根据宽度设备的大小在我的html中显示或隐藏p标签。

最快的解决方案是提供两个不同的类，例如＆＃34; desktop＆＃34;和＆＃34;移动＆＃34;并根据媒体查询将它们显示为块或无。

这个解决方案的问题是文本是html两次，所以对于我的SEO这是一个问题：所以，我创建了一个小函数，使用.append，.appendTo aand finally .insertAfter，将我的文本插入特定的div，但没有幸福的结局：https://jsfiddle.net/noemi84/rej5av6y/

<div class="main-image-block">

</div>

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

</div>

<script>

function resize() {
  if (jQuery(window).width() < 934) {
    jQuery('<p>example text</p>').insertAfter('.main-image-block');
  } else {
    jQuery('<p>bottom text</p>').insertAfter('.home-main-text');
  }
}

resize();

jQuery(document).ready(function($) {

  $(window).on('resize', resize);

});

</script>

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

非常感谢：）

Answer 1

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

只需在可以查看的所有位置插入<p>元素，并将CSS设置为仅在初始状态下显示默认值并隐藏另一个。然后使用@media规则，当屏幕大小符合您的要求时，您可以显示备用规则。试试这个：

.main-image-block + p { display: none; }

@media (max-width: 934px) {
    .home-main-text + p { display: none; }
    .main-image-block + p { display: block; }
}

<div class="main-image-block">MAIN IMAGE</div>
<p>testo di esempio</p>

<div class="home-main-text">HOME MAIN</div>
<p>testo di esempio</p>

Working example

如果您尝试调整jsFiddle的输出框架大小，您可以看到效果有效。

Answer 2

为元素添加ID并在插入新元素之前删除它的每一个：）

function resize() {
  jQuery('#verySpecial').remove();
  if (jQuery(window).width() < 934) {
    jQuery('<p id="verySpecial">example text</p>').insertAfter('.main-image-block');
  } else {
    jQuery('<p id="verySpecial">bottom text</p>').insertAfter('.home-main-text');
  }
}

resize();

jQuery(document).ready(function($) {

  $(window).on('resize', resize);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-image-block">

</div>

<div class="home-main-text">

</div>

如果您需要多个这些元素，您可以采用相同的方式进行，但使用类而不是id。

Answer 3

我认为@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');
  }

}

基本上，您应该移动p或检查是否已存在，然后再插入新的。{/ p>

最好在HTML中插入p并根据屏幕大小显示它们。

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

其他（更好）选项是将类名添加到body或任何其他父元素，并使用CSS显示/隐藏元素。

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

其他选项是跟踪调整大小，仅在需要时执行更改，而不是每次触发resize。

Answer 4

此解决方案适合您：）

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

小提琴：https://jsfiddle.net/3k46bhhs/1/

console.log表示可以删除其工作;）

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

4 个答案: