时间戳

首页 > 解决方案 > JS 改变 HTML 元素位置后重新渲​​染 CSS

javascript - JS 改变 HTML 元素位置后重新渲​​染 CSS

问题描述

我有一个独特的情况要解决。有 10div秒，每个在左边有一个图像，在右边有一个段落。现在，我正在使用 CSSnth-child()选择器将左侧所有奇数 div 图像的位置切换为使用 Flex 的 order 属性显示在右侧。

一支笔来说明问题 - https://codepen.io/rpmcmurphy/pen/dyNaRJw

问题是当我使用 JS 对 parent 重新排序时div，所有 10 个随机，他们随身nth-child(odd)携带，这意味着两个/三个奇数的父母一个接一个地出现。这是我要实现的目标的视觉表示-

他们如何在页面加载 -

<div> // div 1
    <img src=""> <p>Hello</p>
<div>
.......
<div> // div 10
    <img src=""> <p>Hello</p>
<div>

我在做什么-

1. All 10 parent divs will rearrange randomly (using JS I am already doing that)
2. All the ODD `div`s will push the <IMG> to the right side (using flex's order property to do that)

这两个技巧都单独工作。但是当结合起来，这就是页面的样子——

<div> // div 1
    <img src=""> <p>Hello</p>
<div>
<div> // div 2
    <p>Hello</p> <img src="">
<div>
<div> // div 3, previously div 10 before JS rearranged it, for example
    <img src=""> <p>Hello</p>
<div> // div 4
    <img src=""> <p>Hello</p>
<div>
.......

为所有奇数 div 设置了 flex 顺序，例如，当 JS 将原始div10 转换为div3 正上方时，它应该获取我为 ODD 孩子编写的 CSS 并将img标签设置到右侧，因为它是数字10 最初（偶数），现在 JS 使它成为第 3 号（奇数）。它不会把新的 CSS 当作 ODD，即使它是由 JS 切换的，它也会保持不变。

标签： javascriptjquerycssflexbox

解决方案

试试这个 CSS，我想这就是你想要的。

.row:nth-child(odd) > div:nth-child(1) {
  order: 20 !important;
  border: 3px solid red;
}
.row:nth-child(odd) > div:nth-child(2) {
  order: 10 !important;
  border: 3px solid red;
}

推荐阅读