0

我正在使用 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");
        });
    }
}

问题：

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

感谢您的帮助。

4

1 回答 1

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

它不漂亮，但它有效。

于 2015-01-09T15:29:47.827 回答