javascript - 在 Javascript 中可视化汉诺塔算法

Question

Latley 我正在做一个学校项目，我必须提出一个算法，在我的例子中，这个算法是解决汉诺塔谜题的算法。由于我在 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);

然后是实际设置颜色的函数。目前有 2 件事:如果需要，它不会删除颜色，也不会设置颜色，因为我搞砸了 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 并将所有三个 block 的背景颜色设置为特定颜色。但是 switch 语句不起作用，我的想法和时间都用完了，这是一个毁灭性的组合。

也许有人知道这里有什么帮助。感谢您的帮助!

问候..

Answer 1

从 setColors 函数的外观来看，您正在使用 JavaScript 对 block 进行视觉修改。前端 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)来执行相同的任务。