javascript - 禁用 dat.GUI 文件夹

Question

我的示例使用“DAT.GUI.min.js”。选择其他文件夹选项时，我需要禁用/启用文件夹选项。例如，选中“visibleImageX 文件夹”时，必须启用文件夹“fixImageX”，但未选中“visibleImageX 文件夹”时，必须禁用文件夹“fixImageX”。

我的例子是:

function initGUI() {

gui = new dat.GUI({
    height : 5 * 32 - 1
});

parameters = {
    x: 0, y: 0,
    visibleImageX: true,
    visibleImageY: true,
    reset: function() { resetSurvey() }
};

var showPlan = gui.addFolder('Show Plan');
showPlan.add( parameters, 'visibleImageX').name('x').listen().onChange( 
    function(value) {
        if (!value) { 
            parameters.x = 0;
            //disable the folder name: fixImageX
        } 
        else { //enable the folder name: fixImageX}
    });
showPlan.add( parameters, 'visibleImageY').name('y').listen().onChange( 
    function(value) { 
        if (!value) { 
            parameters.y = 0;
            //disable the folder name: fixImageY
        }
    });
showPlan.open();

var fixImage = gui.addFolder('Fix Image');
var fixImageX = fixImage.add( parameters, 'x' ).min(0).max(100).step(1)
.listen().onChange(function(value) {
    // Do somethings
});

var fixImageY = fixImage.add( parameters, 'y' ).min(0).max(100).step(1)
.listen().onChange(function(value) {
    // Do somethings
});
fixImage.open();
}

Answer 1

首先，您只有 2 个文件夹，名为 fixImage 和 showPlan。 然后使用 JQuery， 隐藏你可以做的文件夹

$(fixImage.domElement).attr("hidden", true);

并显示它

$(fixImage.domElement).attr("hidden", false);