我有一个应用程序，它有一个<nav>项目选择列表，将在<article>区域中动态打开。每个项目都定义为<article>区域中的<div>和display:none，直到用户单击<nav>中的选择时，每个项目都被JavaScript函数激活。当它们出现在<article>区域时，它们会按照在<article>中定义的顺序出现。下面显示了代码的突出部分和一些伪部分。
我希望每个div都显示在用户单击的序列中，而不是显示在div的布局序列中。因此，如果用户选择item002然后选择item001，则相应的div将显示在序列item002, item001中。
我一直在尝试通过动态更改文章div的顺序来找到一种使用flex列布局的方法，比如：
document.getElementById(shID).order = myOrdervar;
到目前为止，我所尝试的一切都没有奏效，我在flex上找不到任何文档来告诉我这是否可能。有没有人有一种技术可以改变文章div的显示顺序，无论是否使用flex？
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font: 1em Helvetica;
background: #999999;
}
#main {
min-height: 500px;
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
height: 600px;
flex: 3 1 60%;
order: 2;
flex-flow: column;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
height: 600px;
flex: 1 6 20%;
order: 1;
overflow: auto;
}
header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main, #page {
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
/* Return them to document order */
order: 0;
flex-direction: column;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
<script language="javascript" type="text/javascript">
var globalOrder = 1;
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'flex';
document.getElementById(shID).style.order = globalOrder;
globalOrder++;
}
else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<style type="text/css">
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
.showSquid {
display: block;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
font-size: 1.0em;
font-family: 'MergeLight', Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
padding-left: 0px;
border-top: 0px solid #666;
border-bottom: 0px dotted #36f;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
color: white;
}
</style>
</head>
<body>
<header>
Sources
</header>
<div id='main'>
<nav>
<a href='#' id='Wilmington Wind-show' class='showLink' onclick='showHide("Wilmington Wind");return false;'>
Wilmington Wind
</a><br>
<a href='#' id='ArtMachine.mp3-show' class='showLink' onclick='showHide("ArtMachine.mp3");return false;'>
Art Machine
</a><br>
<a href='#' id='Breathing-original.mp3-show' class='showLink' onclick='showHide("Breathing-original.mp3");return false;'>
Breathing
</a><br>
<a href='#' id='ToroidMachine-show' class='showLink' onclick='showHide("ToroidMachine");return false;'>
</a>
</nav>
<article>
<div id='Wilmington Wind' class='more' style="flex-direction: column;">
Wilmington Wind<br>
</div>
<div id='ArtMachine.mp3' class='more' style="flex-direction: column;">
Art Machine<br>
</div>
<div id='Breathing-original.mp3' class='more' style="flex-direction: column;">
Breathing
</div> <!-- Breathing-original.mp3 -->
</article>
<footer>© 2017</footer>
</div>
</body>
</html>
父元素需要display: flex;——在您的情况下，就是<article>元素。
将其添加到<style>元素中：
article {
display: flex;
}
您错过了document.getElementById(shID).order=myOrdervar;:中的.style部分
document.getElementById(shID).style.order=myOrdervar;
如果有帮助，我写了
body {
font-family: Verdana;
font-size: 12pt;
}
.questions {
/* width: 600px; */
max-width: 600px;
}
.question {
padding: 1em;
margin-bottom: 30px;
border: 1px solid black;
}
.question-label {
font-weight: bold;
padding: 1em;
background-color: blue;
color: white;
}
.propositions {
display: flex;
flex-direction: column;
}
.proposition {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
margin-top: 2px;
/* transition: 2s ease; */
/* transition-duration: 2s; */
}
.proposition-label {
padding: 1em;
/* background: yellow; */
flex-grow: 1;
}
.proposition-buttons {
padding: 1em;
/* background: red; */
width: 150px;
text-align: center;
}
.propositions .p1 {
background: green;
order: 1;
}
.propositions .p2 {
background: yellow;
order: 2;
}
.propositions .p3 {
background: aqua;
order: 3;
}
.propositions .p4 {
background: gray;
order: 4;
}
.question .legend {
font-size: .8em;
font-style: italic;
margin-top: 1em;
}
a.proposition-btn {
display: inline-block;
background: white;
color: black;
/*width: 1.5em;
height: 1.5em;*/
padding: .25em;
border: 1px solid grey;
}
a.proposition-btn:hover {
background: black;
color: white;
}<html>
<head>
<link href="assets/fontawesome-6.4.0/css/all.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script>
const reps = [];
//
function updateOrder(questionNum, propositionNum, nextOrder) {
for(i = 0; i < nextOrder.length; i++) {
const value = nextOrder[i];
const idProposition = 'q' + questionNum + '_p' + value;
const divProposition = document.getElementById(idProposition);
divProposition.style.order = i + 1;
}
// input
const inputId = 'rep' + questionNum;
const input = document.getElementById(inputId);
const nextValue = nextOrder.join('-');
input.value = nextValue;
}
//
function down(questionNum, propositionNum) {
const order = reps[questionNum];
const pos = order.indexOf(propositionNum);
if(pos == 3) {
console.log('Deja en bas');
return;
}
const nextOrder = [];
for(i = 0; i < pos; i++) {
nextOrder.push(order[i]);
}
nextOrder.push(order[pos + 1]);
nextOrder.push(propositionNum);
for(i = pos + 2; i < order.length; i++) {
nextOrder.push(order[i]);
}
reps[questionNum] = nextOrder;
updateOrder(questionNum, propositionNum, nextOrder);
}
//
function up(questionNum, propositionNum) {
const order = reps[questionNum];
const pos = order.indexOf(propositionNum);
if(pos == 0) {
console.log('Deja en gaut');
return;
}
const nextOrder = [];
for(i = 0; i < pos -1; i++) {
nextOrder.push(order[i]);
}
nextOrder.push(propositionNum);
nextOrder.push(order[pos - 1]);
for(i = pos + 1; i < order.length; i++) {
nextOrder.push(order[i]);
}
reps[questionNum] = nextOrder;
updateOrder(questionNum, propositionNum, nextOrder);
}
</script>
</head>
<body>
<div class="questions">
<input type="hidden" name="rep1" id="rep1" value="1-2-3-4" />
<script>
reps[1] = [1, 2, 3, 4];
</script>
<div class="question" id="q1">
<div class="question-label">
1. Quel est votre jour préféré ?
</div>
<div class="propositions">
<div class="proposition p1" id="q1_p1">
<div class="proposition-label">
Lundi
</div>
<div class="proposition-buttons">
<a href="#" class="proposition-btn" onclick="down(1, 1)">Down</a>
<a href="#" class="proposition-btn" onclick="up(1, 1)">Up</a>
</div>
</div>
<div class="proposition p2" id="q1_p2">
<div class="proposition-label">
Mardi
</div>
<div class="proposition-buttons">
<a href="#" class="proposition-btn" onclick="down(1, 2)">Down</a>
<a href="#" class="proposition-btn" onclick="up(1, 2)">Up</a>
</div>
</div>
<div class="proposition p3" id="q1_p3">
<div class="proposition-label">
Mercredi
</div>
<div class="proposition-buttons">
<a href="#" class="proposition-btn" onclick="down(1, 3)">Down</a>
<a href="#" class="proposition-btn" onclick="up(1, 3)">Up</a>
</div>
</div>
<div class="proposition p4" id="q1_p4">
<div class="proposition-label">
Jeudi
</div>
<div class="proposition-buttons">
<a href="#" class="proposition-btn" onclick="down(1, 4)">Down</a>
<a href="#" class="proposition-btn" onclick="up(1, 4)">Up</a>
</div>
</div>
</div>
<div class="legend">
Classez les propositions à l'aide des flèches (en haut celle qui vous correspond le plus).
</div>
</div>
</div>
</body>
</html>