用Javascript可视化河内算法

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代码在此不起作用）：

然后我开始挣扎，因为我不得不以某种方式想象它。我想把每座塔排成一个阵列：

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

然后调用函数来实际设置颜色。目前有两件事：如果需要，它不会擦除颜色，也不会设置颜色，因为我弄乱了开关语句/不知道如何正确操作

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

});

函数设置颜色（目标）{
target.forEach（函数（元素）{
开关（元件）{
案例“”：
$（元素）.css({
“背景色”：“红色”
});
打破
案例“”：
$（元素）.css({
“背景色”：“51616F”
});
打破
案例“”：
$（元素）.css({
“背景色”：“394B5A”
});
打破
}
});

}

现在，如果move函数返回例如A-->B，则setColors应在TowerB上迭代，并将所有三个块的背景色设置为特定颜色。但是switch语句不起作用，我的想法和时间都用完了，这是一个令人沮丧的组合

也许有人知道什么能帮上忙。谢谢你的帮助

---

关于..

从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）。

您的开关将无法工作，因为您正在将元素与字符串进行比较。相反，您可以考虑使用<代码>如果是“< /COD>”并检查是否存在类：<代码> $（元素）。hasClass（“BLK-Top'”）< /代码>。

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