我试图创建一个简单的应用程序以在单击相应按钮时交换div。
但是,作为div.container的第一个孩子的第一个div应该禁用“左”和“上”按钮。
我试图通过找到第一个孩子并将其内的按钮的属性更改为禁用来实现此目的。但这会丢失,并且在交换第一个孩子时不会保留在新的第一个孩子上。
这是代码。
<html>
<head>
<style>
.box {
height: 25%;
width: 45%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
float: left;
}
.disabled-btn {
cursor: not-allowed;
opacity: 0.25%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="box" id="one">
<p>one</p>
<button class="right">Swap with right!</button>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="two">
<p>two</p>
<button class="right">Swap with right!</button>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button class="right">Swap with right!</button>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button class="right">Swap with right!</button>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
<button class="down">Swap with down!</button>
</div>
</div>
<script>
$(document).ready(function() {
resetEvents();
}
function resertEvents() {
$('.right').unbind('click');
$('.left').unbind('click');
$('.top').unbind('click');
$('.down').unbind('click');
$('.right').click(function(){
//alert('ok');
var toMove1 = $(this).parents('.box');
//toMove2 = toMove1.next();
$(toMove1).insertAfter($(toMove1).next());
});
$('.left').click(function(){
//alert('ok');
var toMove1 = $(this).parents('.box');
//toMove2 = toMove1.prev();
$(toMove1).insertBefore($(toMove1).prev());
});
$('.down').click(function(){
//alert('ok');
var toMove1 = $(this).parents('.box');
var middle = $(toMove1).next();
var toMove2 = $(middle).next();
toMove2 = $(toMove1).insertAfter($(middle).next());
var middle = $(toMove2).prev();
//alert(middle);
middle = $(middle).insertBefore($(middle).prev());
//toMove2 = toMove1.prev();
//$(toMove1).insertBefore($(toMove1).prev());
});
$('.top').click(function(){
//alert('ok');
var toMove1 = $(this).parents('.box');
var middle = $(toMove1).prev();
var toMove2 = $(middle).prev();
toMove2 = $(toMove1).insertBefore($(middle).prev());
var middle = $(toMove2).next();
//alert(middle);
middle = $(middle).insertAfter($(middle).next());
//toMove2 = toMove1.prev();
//$(toMove1).insertBefore($(toMove1).prev());
});
}
var firstChild = $('.container').children().first();
var lastChild = $('.container').children().last();
resetChild(firstChild, lastChild);
});
function resetChild(first, last) {
var firstChild = $('.container').children().first();
//console.log(firstChild);
if(firstChild){
//$(firstChild).find('.left').prop('disabled', true);
$(firstChild).find('.left').addClass(disabled-btn);
}
var lastChild = $('.container').children().last();
if(lastChild){
$(lastChild).find('.right').prop('disabled', true);
}
}
</script>
</body>
</html>
添加了fiddle。
最佳答案
因此,我仔细研究了您的逻辑,并对代码的某些方面进行了改进和更改。随附的代码是您所发布内容的改进版本。
我创建了一个函数handleEvents()
,该函数应在重置布局时以及交换两个div时处理所有禁用按钮的属性。必须在交换所有div时基本上调用此方法,以在按钮上呈现新的disabled
属性。
该函数如下所示:
function handleEvents() {
$(".top, .left, .down, .right").prop("disabled", false);
$(".container .box:first-child").find(".top, .left").prop("disabled", true);
$(".container .box:nth-child(2)").find(".top, .right").prop("disabled", true);
$(".container .box:nth-child(3)").find(".down, .left").prop("disabled", true);
$(".container .box:nth-child(4)").find(".down, .right").prop("disabled", true);
}
在此fiddle中检查更新的解决方案。
请在此处参考工作解决方案:
$(document).ready(function() {
resetEvents();
function handleEvents() {
$(".top, .left, .down, .right").prop("disabled", false);
$(".container .box:first-child").find(".top, .left").prop("disabled", true);
$(".container .box:nth-child(2)").find(".top, .right").prop("disabled", true);
$(".container .box:nth-child(3)").find(".down, .left").prop("disabled", true);
$(".container .box:nth-child(4)").find(".down, .right").prop("disabled", true);
}
function resetEvents() {
$(".top, .left, .down, .right").unbind('click');
handleEvents();
$('.right').click(function() {
var toMove1 = $(this).parents('.box');
$(toMove1).insertAfter($(toMove1).next());
handleEvents();
});
$('.left').click(function() {
var toMove1 = $(this).parents('.box');
$(toMove1).insertBefore($(toMove1).prev());
handleEvents();
});
$('.down').click(function() {
var toMove1 = $(this).parents('.box');
var middle = $(toMove1).next();
var toMove2 = $(middle).next();
toMove2 = $(toMove1).insertAfter($(middle).next());
var middle = $(toMove2).prev();
middle = $(middle).insertBefore($(middle).prev());
handleEvents();
});
$('.top').click(function() {
var toMove1 = $(this).parents('.box');
var middle = $(toMove1).prev();
var toMove2 = $(middle).prev();
toMove2 = $(toMove1).insertBefore($(middle).prev());
var middle = $(toMove2).next();
middle = $(middle).insertAfter($(middle).next());
handleEvents();
});
}
});
.box {
height: 25%;
width: 45%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
float: left;
}
.disabled-btn {
cursor: not-allowed;
opacity: 0.25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<body>
<div class="container">
<div class="box" id="one">
<p>one</p>
<button class="right">Swap with right!</button>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="two">
<p>two</p>
<button class="right">Swap with right!</button>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button class="right">Swap with right!</button>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
<button class="down">Swap with down!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button class="right">Swap with right!</button>
<button class="left">Swap with left!</button>
<button class="top">Swap with top!</button>
<button class="down">Swap with down!</button>
</div>
</div>
</body>