javascript - 如何在不重新加载 DOM 的情况下单击时交换网格中的元素
问题描述
https://codepen.io/anon/pen/QPYppp?&editable=true
jQuery.fn.swap = function(b) {
b = jQuery(b)[0];
var a = this[0],
a2 = a.cloneNode(true),
b2 = b.cloneNode(true),
stack = this;
a.parentNode.replaceChild(b2, a);
b.parentNode.replaceChild(a2, b);
stack[0] = a2;
return this.pushStack(stack);
};
function changeVideos() {
$('.wrap-grid > div:nth-child(n + 2)').click(function() {
$('.wrap-grid > div:nth-child(1)').swap($(this));
$(this).off();
changeVideos();
})
};
changeVideos();
*,
::after,
::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main-content .container>.row> :first-child {
padding-left: 0;
}
.main-content .container>.row> :last-child {
padding-right: 0;
}
.wrap-grid {
width: 100%;
display: grid;
grid-gap: 10px;
grid-auto-columns: 1fr 1fr;
grid-template-areas: "a b" "a c" "a d";
margin-bottom: 20px;
}
.wrap-grid>div {
position: relative;
}
.wrap-grid iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.wrap-grid>* {
width: 100%;
background: #fff;
}
.wrap-grid> :nth-child(n + 2) iframe {
pointer-events: none;
}
.wrap-grid> :nth-child(1) {
grid-area: a;
padding-top: 56.25%;
}
@media (max-width: 991.98px) {
.wrap-grid {
grid-template-areas: "a" "b" "c" "d";
}
.wrap-grid>* {
height: 255px;
}
.wrap-grid> :nth-child(1) {
height: 255px;
}
.main-content .container>.row> :first-child,
.main-content .container>.row> :last-child {
padding-left: 0;
padding-right: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap-grid">
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
</div>
我试图将右侧的三个元素之一与左侧的元素交换。与示例相同,我尝试与 jquery 交换,但这是重新加载 dom 元素并且它们正在闪烁。有没有办法通过操纵布局order
中flexbox
的属性来做到这一点。grid
解决方案
order
您可以使用纯 JavaScript访问和设置他们的 flexbox :
document.getElementById('your-id').style.order = 2
document.getElementById('your-id').style.order // returns "2"
或 jQuery:
$('#your-id').css('style', 2)
$('#your-id').css('style') // returns "2"
推荐阅读
- javascript - 通过 JS 管理库存
- go - 带有循环和线程的 Golang 对象范围
- intellij-idea - IntelliJ 中的 GoTo 声明转到绝对路径而不是相对路径
- php - 使用 .httacces 文件从 url 隐藏参数
- javascript - 了解 jQuery 函数的调用/对初学者的小型响应式布局脚本的反馈
- amazon-web-services - 我可以在 AWS Autoscale 组终止运行不正常的实例之前对其进行快照吗?
- python - 带有 Scikit-Learn 的 Google Cloud ML 引发:“dict”对象没有“lower”属性
- php - php嵌套函数p
- asp.net-core-2.0 - 模型验证.Net Core 2.0 Web Api 不工作
- python - 如何在 python 中创建一个不会创建重复数字的随机数生成器