更改无线电上的反向 div

Question

当用户在输入无线电上选择某些内容时，我想在更大的div内反转两个div。

我有这个html：

<input type="radio" name="orderBy" id="orderByAsc" value="asc" >
<input type="radio" name="orderBy" id="orderByDesc" value="desc" >
<div class="col-md-10">
    <div class="tags">
        //Stuff inside
    </div>
    <div class="tagsDifficile">
        //Stuff inside
    </div>
</div>

所以我在javascript中尝试过类似的东西：

$('input[type=radio]').change(function (){
    valueRadio = this.value;
    $('.col-md-10 > div').each(function() {
        if(valueRadio == 'asc'){
            $(this).prependTo(this.parentNode);
        }else{
            $(this).appendTo(this.parentNode);
        }
    });
});

但它不起作用，当我单击收音机描述时，div 不会移动。当我单击无线电asc时，它正在工作，但在desc上没有任何内容。您的帮助将不胜感激。提前感谢您的回答。

Answer 1

$(document).on('change', 'input[name=orderBy]', function() {
  var that = $(this);
  var val = that.val();
  var wrp = $('#wrp');
  var one = $('#one');
  var two = $('#two');
  if (val == 'desc') {
    var oneC = one.clone();
    one.remove();
    two.before(oneC);
  } else if (val == 'asc') {
    var twoC = two.clone();
    two.remove();
    one.before(twoC);
  }
});

.tags {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
}
#one { background-color:green }
#two { background-color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Asc: <input type="radio" name="orderBy" id="orderByAsc" value="asc" >
Desc: <input type="radio" name="orderBy" id="orderByDesc" value="desc" >
<div id="wrp" class="col-md-10">
    <div id="one" class="tags">
        //Stuff inside (one)
    </div>
    <div id="two" class="tags">
        //Stuff inside (two)
    </div>
</div>

Answer 2

这是因为当您单击单选按钮时，它会触发 else 语句，该语句会将div附加到容器结束标记的末尾，因此如果它运行，它会导致类似这样的结果

开始：

<div id="container">
    <div id="1">1</div>
    <div id="2">2</div>
</div>

div#1 上的第一次迭代，排列变为

<div id="container">
    <div id="2">2</div>
    <div id="1">1</div> //div#1 moved to before the end of the container
</div>

然后对于div#2 的第二次迭代，排列变为

<div id="container">
    <div id="1">1</div>
    <div id="2">2</div> //div#2 moved to before the end of the container
</div>

这导致它不显示任何差异，与将其移动到容器开头的预置不同，如果使用相同的 Start，div#1 上的第一次迭代将是这样的

<div id="container">
    <div id="1">1</div> //div#1 moved to after the start of the container
    <div id="2">2</div>
</div>

并且div#2 上的第二次迭代将导致

<div id="container">
    <div id="2">2</div> //div#2 moved to after the start of the container
    <div id="1">1</div>
</div>

因此，如果您的div从一开始就已排序，则只需使用$(this).prependTo(this.parentNode);，无论是升序还是降序

Answer 3

这实际上可以单独使用CSS来完成，不需要任何Javascript。我们要做的是使用 flexbox 来布局div，然后使用一个:checked伪类和一个相邻的选择器 ~ 来更改子div 的order。

.col-md-10{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-flow:row wrap;
    flex-flow:row wrap;
}
.col-md-10>div{
    -webkit-flex:1 0 100%;
    flex:1 0 100%;
    width:100%;
}
input#orderByDesc:checked~.col-md-10>div:first-child{
	-webkit-order:2;
	order:2;
}
input#orderByDesc:checked~.col-md-10>div:last-child{
	-webkit-order:1;
	order:1;
}
*{box-sizing:border-box;}
.col-md-10{background:red;margin:10px 0 0;padding:5px 10px;}
.col-md-10>div{background:green;margin:5px 0;padding:20px;}

<input checked="checked" type="radio" name="orderBy" id="orderByAsc" value="asc" > Asc
<input type="radio" name="orderBy" id="orderByDesc" value="desc" > Desc
<div class="col-md-10">
    <div class="tags">
        Box 1
    </div>
    <div class="tagsDifficile">
        Box 2
    </div>
</div>

编辑：如果您有很多子div并且不喜欢编写CSS来更改每个子div的顺序，则可以将父div的flex-direction更改为row-reverse：

input#orderByDesc:checked~.col-md-10{
    flex-flow:row-reverse wrap;
}

• 更多关于 MDN 上的弹性框的信息
• 有关 CSS 技巧上的弹性框的更多信息
• 有关相邻选择器的更多信息
• 有关伪类:checked的更多信息

Answer 4

当你点击desc时，你想让它做什么？因为现在，它根本不会改变顺序，你选择每个div 并将其附加到它的父级，所以你把它准确地放在开头的位置。如果您也想通过单击 desc 来更改顺序，只需在这两种情况下都使用 prepend。例如：

$('input[type=radio]').change(function (){
    $('.col-md-10 > div').each(function() {
        $(this).prependTo($(this).parent());
    });
});

JSFiddle： JSFiddle