Distriggers un pulsante nel primo figlio div

Ho provato a creare una semplice applicazione per scambiare div facendo clic sui rispettivi pulsanti.

Tuttavia, il primo div che è il primo figlio di div.container dovrebbe avere disabilitato il pulsante ‘left’ e ‘top’.

Ho cercato di raggiungere questo risultato trovando il primo figlio e cambiando la proprietà del pulsante al suo interno su disabilitato. Ma questo è perso e non viene mantenuto sul nuovo primo figlio quando cambio il primo figlio.

Ecco il codice.

   .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%; }     

one

two

three

four

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

Aggiunto il violino .

Quindi, ho esaminato la tua logica e ho modificato e modificato alcuni aspetti del tuo codice in meglio. Il codice allegato è una versione migliorata di ciò che hai pubblicato.

Ho creato una funzione handleEvents() che dovrebbe gestire tutte le proprietà del pulsante di distriggerszione al ripristino del layout e quando vengono scambiate due div. Questo metodo deve essere fondamentalmente chiamato sullo scambio di tutte le div per rendere le nuove proprietà disabled sui pulsanti.

La funzione è simile a questa:

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

Controlla la soluzione aggiornata in questo violino .

Fare riferimento alla soluzione di lavoro qui:

 $(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%; } 
   

one

two

three

four

Per prima cosa configureremo tutti i pulsanti secondo le tue esigenze.

  • (in alto a sinistra), disabilita l’alto e il sinistro
  • (in alto a destra), disabilita l’alto e il destro
  • (in basso a sinistra), disabilitare down e left
  • (in basso a destra), disabilitare down e right

jsfiddle completo qui


Codice

 function resetButtons() { // enable all buttons $("button").prop("disabled", false); // First box (top left), disable top and left var firstBox = $(".box").eq(0); firstBox.find(".top").prop("disabled", true) firstBox.find(".left").prop("disabled", true); // Second box (top right), disable top and right var secondBox = $(".box").eq(1); secondBox.find(".top").prop("disabled", true) secondBox.find(".right").prop("disabled", true); // Third box (bottom left), disable down and left var thirdBox = $(".box").eq(2); thirdBox.find(".down").prop("disabled", true) thirdBox.find(".left").prop("disabled", true); // Fourth box (bottom right), disable down and right var fourthBox = $(".box").eq(3); fourthBox.find(".down").prop("disabled", true) fourthBox.find(".right").prop("disabled", true); } 

Per lo swapping, giocheremo con l’array-index delle caselle e scambiamo il contenuto html di ogni box.

 function swapContent(divA, divB) { var tempDiv = divA.html(); divA.html(divB.html()); divB.html(tempDiv); } 

Ad esempio, il pulsante destro scambia la casella corrente e quella accanto ad essa (alla sua destra).

 $(".container").on("click", ".right", function(e) { var currentBox = $(this).parents('.box'); var currentIndex = $(".box").index(currentBox); console.log(currentIndex, "right", currentBox); swapContent( currentBox, $(".box").eq(currentIndex+1) ); resetButtons(); });