按顺序显示隐藏的 div答案

【问题标题】：Show hidden div in order按顺序显示隐藏的 div
【发布时间】：2020-02-14 17:43:49
【问题描述】：

我有这个代码：

$('button').click(function(){
    var a = $(this).text();
    $('.'+a).show();
    $('.'+a).css("order", "1");
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class='1' style='display:none'><input type='text' value='1'></input>
  </div>
  <div class='2' style='display:none'><input type='text' value='2'></input>
  </div>
  <div class='3' style='display:none'><input type='text' value='3'></input>
  </div>

  <button>1</button>
  <button>2</button>
  <button>3</button>

我需要它们按照我单击按钮的顺序排列。我尝试使用.css('order','1')，但它似乎不起作用

【问题讨论】：

它在 sn-p 中工作。
例子：如果我先点击按钮2，输入2应该是第一个，如果按钮3是我点击的第二个按钮，输入3应该是第二个，如果按钮1是第三个被点击，输入 1 必须是第三个。
2 件事。 CSS 类不能以数字开头。 order 属性需要 flex 或 grid 布局，如果没有其中之一，它将无法执行任何操作。
我想有一个
@FelipeCristiano 所以一旦选择了所有选项，它们就完成了吗？有人可以在选择所有选项后单击吗？例如，他们可以走 3、1、2、3 吗？最终显示顺序（从上到下）将是 3、2、1。

标签： jquery html css forms input

【解决方案1】：

由于您使用的是 jQuery，因此您可以创建一个包装器并使用 appendTo 而不是依赖 order 属性。

$('button').click(function() {
  var a = $(this).text();
  $('.' + a).show();
  $('.' + a).appendTo('.wrapper');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class='a' style='display:none'><input type='text' value='1'>
  </div>
  <div class='b' style='display:none'><input type='text' value='2'>
  </div>
  <div class='c' style='display:none'><input type='text' value='3'>
  </div>
</div>

<button>a</button>
<button>b</button>
<button>c</button>

【讨论】：

我真的很喜欢这个答案，但是如果我需要它们以相反的顺序，我可以修改什么来使这段代码工作？
@FelipeCristiano 代替 appendTo 使用 prependTo。
我是这样用的：if($('.' + a).is(":hidden")){ $('.' + a).appendTo('.wrapper'); }
如果我希望职位始终得到更新，我可以删除if

【解决方案2】：

https://jsfiddle.net/fxsa3e85/3/

$( 'button' ).click(function() {

  console.log( $( ".div[style*='display: unset']" ).length );


  var a = $( this ).text();
  $( '.' + a ).css( "display", "unset" );
  $( '.' + a ).css( "order", $( ".div[style*='display: unset']" ).length + 1 );

} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="orders" style="display:grid">
  <div class="div 1" style="display: none"><input type="text" value="1"></div>
  <div class="div 2" style="display: none"><input type="text" value="2"></div>
  <div class="div 3" style="display: none"><input type="text" value="3"></div>
</div>


<button>1</button>
<button>2</button>
<button>3</button>

【讨论】：