反向div更改收音机

debugcn 发表于 Dev

Roadirsh

当用户在输入广播中选择某些内容时，我想在较大的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上却什么也没有。您的帮助将不胜感激。预先感谢您的回答。

卡潘察克

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。