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

然后实际设置颜色的功能.目前有两件事:如果需要它不会擦除颜色,它根本不会设置颜色,因为我搞砸了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语句不起作用,我用完了想法和时间,这是一个令人讨厌的组合.

也许有人知道什么可以帮助这里.我感谢任何帮助!

问候..

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）执行相同的任务。