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);
        }
    });
});

但它没有工作，当我点击收音机desc时，div不动。当我点击收音机asc时，它正在工作，但在desc上没有任何内容。非常感谢你的帮助。提前感谢您的回答。

Answer 1

＆＃13;

$(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);
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是因为当您点击收音机desc时，它会触发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。

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

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

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

Answer 4

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

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

JSFiddle：JSFiddle

改变无线电的反向div

4 个答案: