时间戳

首页 > 解决方案 > 当我们切换到具有相同父类但嵌套在两个不同 div 中的移动视图时，我正在尝试切换到部分

javascript - 当我们切换到具有相同父类但嵌套在两个不同 div 中的移动视图时，我正在尝试切换到部分

问题描述

如何使用 Javascript 或 CSS 实现这一点。代码语法的简单示例是：

<div class="container">
     <div class="row">
            <section class="one">
                <p>First Line</p>
            </section>
            <section class="two">
                <p> Second line</p>
            </section>
      </div>
      <div class="row">
            <section class="three">
                <p>Third Line</p>
             </section>
            <section class="four">
                <p> Fourth line</p>
             </section>
      </div>
</div>

每当我更改为移动视图时，我想根据此代码交换第二行和第三行。在此之前，第一行和第二行是一排，第三行和第四行是一排。现在，当我们切换到移动视图时，所有内容都从上到下堆叠，但我需要更改移动视图中第二（蓝色）和第三（绿色）线的位置。

标签： javascripthtmlcss

解决方案

您可以交换innerHTML两个节点中的一个以交换文本和“classList”以交换类（颜色）。检查下面的代码片段，我使用数组破坏进行交换。

您可以window.matchMedia用于基于某些媒体查询的交换。

const sectionTwo = document.querySelector(".two");
const sectionThree = document.querySelector(".three");

function swapNodes(nodeOne, nodeTwo) {
  [nodeTwo.innerHTML, nodeOne.innerHTML] = [nodeOne.innerHTML, nodeTwo.innerHTML];
  [nodeTwo.classList, nodeOne.classList] = [nodeOne.classList, nodeTwo.classList];
}

if (matchMedia) {
    const mq = window.matchMedia("(max-width: 500px)");
    mq.addListener(widthChange);
    widthChange(mq);
}

// media query change
function widthChange(mq) {
    if(mq.matches){
    swapNodes(sectionTwo, sectionThree);
  }
}
<div class="container">
  <div class="row">
    <section class="one">
      <p>First Line</p>
    </section>
    <section class="two">
      <p> Second line</p>
    </section>
  </div>
  <div class="row">
    <section class="three">
      <p>Third Line</p>
    </section>
    <section class="four">
      <p> Fourth line</p>
    </section>
  </div>
</div>

推荐阅读