Question

<script type="text/javascript">
$(document).ready(function(){
    $(window).resize(function() {
    if($(window).width() < 767){
    $("#second").insertBefore("#first"); }
    else{
        $("#first").insertBefore("#second"); }
     });
});
</script>

我想更改html元素。在上面的代码中没有什么是错的，但是当我们的屏幕尺寸已经很小（＆lt; 767）时，由于resize（）函数它将无法工作，并且当我们移除resize函数时它将工作但是当我们增加屏幕尺寸时它会失败。它无法改变元素。其实我正在寻找像@media css属性这样的解决方案。我们都知道当我们使用媒体时，我们可以通过检查员看到效果。我有一个代码，但它无法正常工作

document.querySelector('style').textContent += "@media screen and (max-width:767px) {"+
$("#second").insertBefore("#first");+" }";

实际上代码不一样。我编辑并尝试运行但不工作。如何使用媒体查询更改小屏幕中的元素？或任何其他解决方案，但必须是响应

Answer 1

<script type="text/javascript">
$(document).ready(function(){
    $(window).resize(function() {
         change();
     });
     change();
});
function change(){
    if($(window).width() < 767){
        $("#second").insertBefore("#first"); 
    }
    else
    {
        $("#first").insertBefore("#second"); 
    }
}
</script>

Answer 2

您必须使用.trigger(resize);

Answer 3

你可以使用@media屏幕例如：

@media screen and (max-width: 480px) {
  #info {
    font-size: 0.6em;
}

在CSS当然

Answer 4

try this code its working fine...

    resize_solution();
    $(document).ready(function(){
        $(window).resize(function() {
            resize_solution();
        }); 
    });
    function resize_solution(){
        if($(window).width() < 767){
            $("#second").insertBefore("#first"); 
        }
        else{
            $("#first").insertBefore("#second"); }
    }

Answer 5

你的意思是根据屏幕宽度交换html元素吗？如果是这样，为什么不使用CSS？

<style>
.hidden {
  display: none;
}

@media screen and (min-width: 768px) {
  #first-copy, #second-copy {
    display: block;
  }

  #first, #second {
    display: none;
  }
}
</style>

<html>
<div id="first" style="border: 1px solid; width: 100px; text-align: center">
  <p>
    first element
  </p>
</div>
<div id="second" style="border: 1px solid; width: 100px; text-align: center">
  <p>
    second element
  </p>
</div>
<div id="second-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
  <p>
    second element
  </p>
</div>
<div id="first-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
  <p>
    first element
  </p>
</div>
</html>

https://jsfiddle.net/8sug5pws/2/

如何使用jquery更改html的元素

5 个答案: