javascript - 使用jquery onclick时如何更改元素的位置？

Question

我有两个 div，.div_data 和 .div_update 其中

<select name=change_placement>
    <option value=0>Top</option>
    <option value=1>Bottom</option>
</select>

<div class='div_data'>Data Data</div>
<div class='div_update'>
    <form name=stuff>
        <input type=text>
    </form>
</div>

点击 select[name=change_placement] 时，如何使 .div_update 位于 .div_data 之前？

Answer 1

我在您的选择中添加了一个 ID，并在您的下拉选择中添加了一个“选择”选项。我假设您希望当您选择“顶部”时输入文本框位于另一个 div 之上。

$('#change_placement').on('change', function() {
   var option = $(this).val();
   if(option == 0) {
     $('.div_update').insertBefore($('.div_data'));
   } else {
     $('.div_update').insertAfter($('.div_data'));
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='change_placement' id='change_placement'>
 <option value=''>Select</option>
 <option value='0'>Top</option>
 <option value='1'>Bottom</option>
</select>

<div class='div_data'>
 Data
 Data
</div>
<div class='div_update'>
 <form name=stuff>
  <input type=text>
 </form>
</div>