Inverse div on change radio

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

Но это не работает, и когда я нажимаю на радио по алфавиту, то ДИВ не переехать. Он работает, когда я нажимаю на радио по ходу движения, но ничего не происходит. Ваша помощь была бы очень признательна. Заранее благодарю за ваш ответ.

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

Что вы хотите, чтобы это сделать, при нажатии на кнопку по алфавиту? Потому что прямо сейчас он не изменит порядок вообще, вы выбираете каждый div и добавляете его к своему родителю, поэтому вы ставите его именно там, где он был в начале. Если вы хотите изменить порядок, нажав на desc, просто используйте preend в обоих случаях. Например:

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

JSFiddle: JSFiddle

Answer 3

Это потому, что, когда вы щелкаете по радио 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> 

затем на 2-й итерации на сНу # 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, то первая итерация на сНу # 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> 

и 2-й итерации на сНу # 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 4

На самом деле это может быть достигнуто с помощью CSS в одиночку, нет необходимости в каком-либо JavaScript. Мы собираемся использовать flexbox для компоновки div, а затем, используя псевдокласс класса :checked и соседний селектор ~, измените order дочерних div.

.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{ 
 
\t -webkit-order:2; 
 
\t order:2; 
 
} 
 
input#orderByDesc:checked~.col-md-10>div:last-child{ 
 
\t -webkit-order:1; 
 
\t 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>

EDIT: Если у вас есть много детей див и не фантазии написания CSS, чтобы изменить порядок каждого одного, вы можете изменить flex-direction родительских дела до row-reverse вместо:

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

• More information on flexbox on MDN
• More information on flexbox on CSS Tricks
• More information on adjacent selectors
• More information on :checked pseudo class