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

Question

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

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

问题:

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

例如，场景中有一段文字。当我单击复选框时，它必须显示/隐藏文本，当我单击“displayOutline”时，它必须放大文本。但是，在上面的链接中，当您单击文本或复选框时，会发生一个操作。我无法向文本和复选框添加不同的操作。

代码:

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

虽然不漂亮，但很管用。