如何控制dat.gui中的复选框？

Question

我正在使用dat.gui为应用程序提供一个界面来控制类似于以下示例的场景：

http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

问题：

我需要向复选框添加一个动作，并向复选框旁边的文本（显示大纲）添加另一个动作。

比如场景中有一段文字。当我单击复选框时，它必须 show/Hide 文本，当我单击 "displayOutline" 时，它必须放大文本。但是，在上面的 link 中，当您单击文本或复选框时，会发生一个动作。我无法向文本和复选框添加不同的操作。

代码：

var folder1 = gui.addFolder('Basement');
folder1.add( parameters, 'visible' ).name('Lot 1');
var spans = document.getElementsByTagName('span');
for (var i = 0, l = spans.length; i < l; i++){
    var text = spans[i].textContent || spans[i].innerText;
    if (text == "displayOutline")
        {
        var checkbox = spans[i].nextSibling.firstChild;
        checkbox.addEventListener('click', function(event){
        // Do something with the checkbox
        alert("checked");
        });
    }
}

问题：

如何向复选框和复选框旁边的文本添加不同的操作？

感谢您的帮助。

Answer 1

好吧，你想破解 dat.gui 所以你应该，嗯，破解它。查看生成的标签。有一个看起来像这样的标签：

<span class="property-name">displayOutline</span>

因此检索该元素，并向其添加点击处理程序。这是对您已添加的处理程序的补充。单击标签时仍会调用您的处理程序，但只会在单击标签时调用新的处理程序。因此，您需要添加某种标志以防止您的复选框单击处理程序在仅单击标签时执行。

var spans = document.getElementsByTagName('span');
var _labelClickHandlerCalled = false;
for (var i = 0, l = spans.length; i < l; i++){
    var text = spans[i].textContent || spans[i].innerText;
    if (text == "displayOutline")
    {
        spans[i].addEventListener('click', function(event){
          _labelClickHandlerCalled = true;
          console.log("label checked");
        });      
        var checkbox = spans[i].nextSibling.firstChild;
        checkbox.addEventListener('click', function(event){
          if (_labelClickHandlerCalled) {
            _labelClickHandlerCalled = false;
            return;
          }
          console.log("checkbox checked");
        });
    }
}

它不漂亮，但它有效。

如何控制dat.gui中的复选框？

How to control checkbox in dat.gui?

javascript

three.js

dat.gui