使用Javascript可视化汉诺塔算法

Question

最近我正在做一个学校项目，需要展示一个算法，我的情况是汉诺塔的解题算法。由于我对HTML/CSS有一定的了解，我认为使用这些技术加上Javascript可以在网页上直观地展示每个步骤。

我已经搭建好了网站，并实现了基本的递归算法。

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

页面布局（这里的CSS代码是没有用的）：

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

然后我开始苦恼，因为我需要以某种方式可视化它。我想把每个塔放入一个数组中：

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

接下来是实际设置颜色的函数。目前有两个问题：如果需要，它不会擦除颜色，并且由于我弄错了switch语句/不知道如何正确执行它，它根本不会设置颜色。

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

});

现在，如果移动函数返回A --> B，setColors 函数应该遍历TowerB并将所有三个块的背景色设置为特定颜色。但是switch语句不起作用，我已经没有更多的想法和时间了，这是一个毁灭性的组合。

也许有人知道什么可以帮助解决这个问题。我感激任何帮助！

问候..

- user5423851

---

你的开关无法工作，因为你在将元素与字符串进行比较。相反，你可以考虑使用 if-else 并检查类是否存在：$(element).hasClass('blck--top')。 - Mike Cluck

Answer 1

根据您的setColors函数，您正在使用JavaScript对块进行视觉修改。前端Web开发的普遍共识是将这些任务留给CSS。

在您的情况下，您正在检查DIV是否具有类block和blck--bottom。因此，您可以尝试使用以下选择器的样式表，而不是使用JavaScript：

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

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

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

与此相反，如果您需要执行非基于视觉的进一步操作，则可以采用以下方法。

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

但是如果你真的希望使用switch case语句，那么：

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

请注意，我还提供了一种使用纯JavaScript（如果您愿意，可以不使用JQuery）执行相同任务的方法。

- Ruben Funai