Question

我目前正在构建一个投资组合，我打算模仿Windows工作流来显示我的项目并熟悉用户交互。我现在面临的问题是创建多个资源管理器窗口。我当时可以创建多个，但是当我尝试为每个窗口指定的内容时，这些不会假设分配了正确的内容。我在这个项目中使用常规JS和jQuery。

我正在使用以下代码生成资源管理器窗口：

$(window).ready(function(){

var desktop = document.querySelector('.workarea');

$('.general_icon').click(function(e){
    console.log(e);

    var explorerWindow = document.createElement('div');
    explorerWindow.className += 'explorer_window ui-widget-content ';

        var topToolBar = document.createElement('div');
        topToolBar.className += 'top_toolbar';

            var windowTitle = document.createElement('div');
            windowTitle.className += 'window_title';
            windowTitle.innerHTML = e.currentTarget.innerText;

            var windowOperations = document.createElement('div')
            windowOperations.className += 'window_operations';

                var minimize = document.createElement('div')
                minimize.className += 'minimize';
                minimize.innerHTML += '&#95;';

                var maximize = document.createElement('div')
                maximize.className += 'maximize';
                maximize.innerHTML += '&square;';

                var close = document.createElement('div')
                close.className += 'close';
                close.innerHTML += '&times;';

            var topToolBar2 = document.createElement('div');
            topToolBar2.className += 'top_toolbar_2';

                var secondToolbBarOpt1 = document.createElement('span')
                secondToolbBarOpt1.className += 'noselect';
                secondToolbBarOpt1.innerHTML = 'File';

                var secondToolbBarOpt2 = document.createElement('span')
                secondToolbBarOpt2.className += 'noselect';
                secondToolbBarOpt2.innerHTML = 'Base';

                var secondToolbBarOpt3 = document.createElement('span')
                secondToolbBarOpt3.className += 'noselect';
                secondToolbBarOpt3.innerHTML = 'Share';

                var secondToolbBarOpt4 = document.createElement('span')
                secondToolbBarOpt4.className += 'noselect';
                secondToolbBarOpt4.innerHTML = 'View';

            var contentHolder = document.createElement('div');
            contentHolder.className += 'content_holder';

                //determines current clicked icon
                //var ter = e.currentTarget.attributes[1].value;

        desktop.appendChild(explorerWindow);
            explorerWindow.appendChild(topToolBar);
                topToolBar.appendChild(windowTitle);
                topToolBar.appendChild(windowOperations);
                    windowOperations.appendChild(minimize);
                    windowOperations.appendChild(maximize);
                    windowOperations.appendChild(close);
            explorerWindow.appendChild(topToolBar2);   
                topToolBar2.appendChild(secondToolbBarOpt1);
                topToolBar2.appendChild(secondToolbBarOpt2);
                topToolBar2.appendChild(secondToolbBarOpt3);
                topToolBar2.appendChild(secondToolbBarOpt4);
            explorerWindow.appendChild(contentHolder);

        var ter = e.currentTarget.attributes[1].value;
        console.log(ter)
        console.log(projectsData[ter].paths.length)

        for (var i = 0; i < projectsData[ter].paths.length; i++) {
            var actCont = document.createElement('div');
            actCont.className += 'act_cont';
            contentHolder.appendChild(actCont); 
        }

        var innerActCont = document.getElementsByClassName('act_cont');
        for (var k = 0; k < projectsData[ter].paths.length; k++) {
            innerActCont[k].style.backgroundImage = 'url(' + projectsData[ter].paths[k] + ')';
            event.stopPropagation();
        }

    //make windows draggable
    //sets the target for the drag event
    $(".explorer_window").draggable({ handle: ".top_toolbar", containment: '.place' } );

});

});

我在循环中使用的projectsData是：

var projectsData = [
    {
        title:'Random Lines of Color',
        icon: 'images/random_bars_colors.png',
        paths : [
            'images/port/tipos/1.png',
            'images/port/tipos/2.png',
            'images/port/tipos/3.png'
        ]
    },
    {
        title:'Numbers to Letters Converter',
        icon: 'images/nums_to_letters.png',
        paths : [
            'images/port/tipos/1.png',
            'images/port/tipos/2.png',
            'images/port/tipos/3.png'
        ]
    },
    {
        title: 'Tipos',
        icon: 'images/port/tipos/tipo.png',
        paths : [
            'images/port/tipos/1.png',
            'images/port/tipos/2.png',
            'images/port/tipos/3.png'
        ]
    },
    {
        title: 'Cópia Maplethorpe',
        icon: 'images/port/thorpe/thorpe.png',
        paths : [
            'images/port/thorpe/1.jpg',
            'images/port/thorpe/2.png',
        ]
    },
    {
        title: 'Packaging Cubo',
        icon: 'images/port/moo/moo.png',
        paths : [
            'images/port/moo/1.png',
            'images/port/moo/2.png',
            'images/port/moo/3.png'
        ]
    },
    {
        title: 'Gama Especial',
        icon: 'images/port/magn/magnum.png',
        paths : [
            'images/port/magn/1.png',
            'images/port/magn/2.png',
            'images/port/magn/3.png',
            'images/port/magn/4.png',
            'images/port/magn/5.png',
            'images/port/magn/6.png'
        ]
    },
    {
        title: 'Hearts And Bones',
        icon: 'images/port/hb/hb.png',
        paths : [
            'images/port/hb/1.png',
            'images/port/hb/2.png',
            'images/port/hb/3.png',
            'images/port/hb/4.png',
            'images/port/hb/5.png'
        ]
    },
    {
        title: 'Alzheimer',
        icon: 'images/port/alz/alz.png',
        paths : [
            'images/port/alz/1.jpg'
        ]
    }
]

该网站的当前版本位于http://mingus.pt

单击桌面图标时，将打开资源管理器窗口。还有一个问题，当我滚动所说的浏览器窗口我不能让它的工具栏保持位置固定，这是一个小事情，但如果你有一些空闲时间来看看，我也会非常非常乐观。

提前感谢你们给予的任何帮助！

Answer 1

问题在于您的代码的以下部分

var innerActCont = document.getElementsByClassName('act_cont');
for (var k = 0; k < projectsData[ter].paths.length; k++) {
    innerActCont[k].style.backgroundImage = 'url(' + projectsData[ter].paths[k] + ')';
}

具体来说，行var innerActCont = document.getElementsByClassName('act_cont');在整个文档中找到act_cont元素，因此它返回已经打开的窗口的元素，因此您将覆盖打开窗口中的元素。

您只需将循环限制为新窗口中的.act_cont元素。所以将代码更改为

var innerActCont = contentHolder.getElementsByClassName('act_cont');

（使用变量contentHolder代替document ）

此外，您可以使用jquery来简化/压缩代码。

Windows模仿投资组合

1 个答案: