Wizualizacja algorytmu wież Hanoi w JavaScript

Question

Latley Pracuję nad projektem szkolnym i muszę przedstawić algorytm, który jest w moim przypadku algorytmem rozwiązywania zagadkowych wież Hanoi. Ze względu na moją znajomość HTML/CSS pomyślałem, że byłoby całkiem fajnie używać tych + Javascriptów do wizualizacji kroków na stronie.

Mam skonfigurowaną witrynę oraz podstawowy, rekurencyjny algorytm.

function move(n, beg, aux, end) { 

if (n == 1) { 
    console.log(beg + '-->' + end + '\n'); 
    setTowers(beg, end); 
} else { 
    move(n - 1, beg, end, aux); 
    move(1, beg, aux, end); 
    move(n - 1, aux, beg, end); 
    } 
} 

Układ strony (kod CSS przyzwyczajenie pomóc tutaj):

section#main-app 
.app-wrapper 
    .tower-wrapper 
     .tower#twr--a 
      .block.blck--top 
      .block.blck--middle 
      .block.blck--bottom 
     .tower#twr--b 
      .block.blck--top 
      .block.blck--middle 
      .block.blck--bottom 
     .tower#twr--c 
      .block.blck--top 
      .block.blck--middle 
      .block.blck--bottom 

Potem zacząłem walczyć jak musiałem jakoś wizualizację. Pomyślałem o umieszczeniu każdej wieży w tablicy:

var twrElemsA = document.getElementById('twr--a').getElementsByClassName('block'); 
towerA = jQuery.makeArray(twrElemsA); 

Następnie funkcja do faktycznego ustawienia koloru. 2 rzeczy w tej chwili: nie będzie w razie potrzeby wymazywać koloru i nie będzie w ogóle ustawiał koloru, ponieważ zawiodłem instrukcję switch/nie wiem, jak to zrobić.

function setColors(target) { 

target.forEach(function (element) { 

    switch (element) { 
     case '<div class="block blck--top">': 
      $(element).css({ 
       'background-color': 'red' 
      }); 
      break; 

     case '<div class="block blck--middle">': 
      $(element).css({ 
       'background-color': '#51616F' 
      }); 
      break; 

     case '<div class="block blck--bottom">': 
      $(element).css({ 
       'background-color': '#394B5A' 
      }); 
      break; 
    } 

}); 

}

Teraz, gdy funkcja zwraca na przykład ruch A -> B, setColors powinien następnie iteracyjne nad TowerB i ustawić kolory tła wszystkich trzech bloków do konkretnego koloru. Ale instrukcja switch nie działa i brakuje mi pomysłów i czasu, który jest dewastującym połączeniem.

Może ktoś wie, co może pomóc tutaj. Doceniam każdą pomoc!

Pozdrawiam ..

Answer 1

z wyglądu swoich setColors funkcjonować robisz modyfikacje wizualne do bloków przy użyciu JavaScript. Ogólny konsensus w tworzeniu stron WWW jest pozostawienie tych zadań CSS.

W twoim przypadku sprawdzanie DIV mają klasy block i blck--bottom. Więc raczej niż przy użyciu JavaScript może można próbować arkusza stylów z poniższego selektora:

.block.blck--top { 
    background-color: '#51616F'; 
} 

.block.blck--middle { 
    background-color: '#51616F'; 
} 

.block.blck--bottom { 
    background-color: '#51616F'; 
} 

W przeciwieństwie do tego jednak, jeśli trzeba wykonać dodatkowe czynności, które nie są oparte wizualny można przyjąć następujące podejście.

function setColors(target) { 

target.forEach(function (element) { 

    if(element.classList.contains('blck--top')) 
    { 
     element.style['background-color'] = 'red'; 
     /* - Extra code here - */ 
    } 
    else if(element.classList.contains('blck--middle')) 
    { 
     element.style['background-color'] = '#51616F'; 
     /* - Extra code here - */ 
    } 
    else if(element.classList.contains('blck--bottom')) 
    { 
     element.style['background-color'] = '#394B5A'; 
     /* - Extra code here - */ 
    } 
}); 

Ale jeśli naprawdę chcesz użyć stwierdzenia przypadków przełącznik następnie:

function setColors(target) { 

target.forEach(function (element) { 

    switch (element.getAttribute('class')) { 
     case 'block blck--top': 
      $(element).css({ 
       'background-color': 'red' 
      }); 
      break; 

     case 'block blck--middle': 
      $(element).css({ 
       'background-color': '#51616F' 
      }); 
      break; 

     case 'block blck--bottom': 
      $(element).css({ 
       'background-color': '#394B5A' 
      }); 
      break; 
    } 
}); 

Należy pamiętać, że ja również drogę do wykonywania tych samych zadań przy użyciu zwykłego starych JavaScript (jQuery mniej, jeśli będziesz).