jquery - 如何在移动元素时保持对齐
问题描述
$('.box').on('click', function(){
$('.act').removeClass('act');
$(this).addClass('act');
});
$('button').on('click', function(){
$('.act').insertAfter($('.act').next());
});
.parent{
text-align:justify;
text-align-last:justify;
background:lightgreen;
}
.box{
display:inline-block;
width:20%;
height:25px;
background:orange;
}
.act{
background:skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='box'>1</div>
<div class='box'>1</div>
<div class='box'>1</div>
<div class='box'>1</div>
</div>
<br>
<button>CLICK</button>
单击第一个框以使其处于活动状态。
然后单击按钮将其向右移动。
您会看到对齐丢失,即框之间没有空格。
如何防止这种情况?
解决方案
不要使用insertAfterafter
,这会弄乱justify
样式,只需在 div 之间切换位置:
$('.box').on('click', function(){
$('.act').removeClass('act');
$(this).addClass('act');
});
$('button').on('click', function(){
div1 = $('.act');
div2 = $('.act').next();
tdiv1 = div1.clone();
tdiv2 = div2.clone();
if(!div2.is(':empty')){
div1.replaceWith(tdiv2);
div2.replaceWith(tdiv1);
$('.box').on('click', function(){
$('.act').removeClass('act');
$(this).addClass('act');
});
}
// $('.act').insertAfter($('.act').next());
});
.parent{
text-align:justify;
text-align-last:justify;
background:lightgreen;
}
.box{
display:inline-block;
width:20%;
height:25px;
background:orange;
}
.act{
background:skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>
<br>
<button>CLICK</button>
推荐阅读
- javascript - Spring Boot:双引号格式错误
- java - 使用 JDBI 的 Quarkus
- tensorflow2.0 - 类型错误:“函数”接受 1 个位置参数,但给出了 2 个
- sql - 尝试将 SQL 开发人员与 Oracle 数据库连接时出现 ORA-12705 错误
- jenkins - 如何由特定用户运行 Jenkins 作业
- python - 如何为 pyarrow Table 列设置“类别”数据类型?
- swift - 无法通过直播中新创建的频道进行流式传输
- python - 如何按行值将一个 DataFrame 拆分为多个 DataFrame?
- ffmpeg - 没有这样的文件或目录 discord.py
- kubernetes - Nginx Ingress 路径重定向到 azure K8 中的多个服务