javascript - YUI setStyle 不起作用

Question

我有以下代码片段:

YUI().use('event', function (Y) {
    var button = Y.one("#ckbox");
    button.ancestor(".control-group").next(".control-group").setStyle("display", "none");
    button.on("change", function (e) {
        var checkbox = e.target;    
        if(checkbox.get('checked')) {
            alert("it is checked");
            checkbox.ancestor(".control-group").next(".control-group").setStyle("display", "block");
        } else {
            checkbox.ancestor(".control-group").next(".control-group").setStyle("display", "none");
        }           
    });
});

<script src="http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js"></script>
<div class="control-group form-inline"> 
    <label class="checkbox" for="ckbox"> 
        <input id="ckbox-hiden" name="ckbox-hiden" type="hidden" value="true" /> 
        <input class="field checkbox-checked" id="ckbox" name="ckbox" type="checkbox" value="true" />         
            Show div
    </label> 
</div>
<div class="control-group"> 
    <p>HIDE THIS</p>
</div>

jsFiddle

我想隐藏一个 div，当选中该复选框时我想显示该 div。
我收到此错误:

TypeError: button.ancestor(...).next(...).setStyle is not a function

Answer 1

您需要添加 node 模块才能利用操作 node 的方法:

YUI().use('event', 'node' function (Y) { // ...

YUI().use('event', 'node', function (Y) {
    var button = Y.one("#ckbox");
    button.ancestor(".control-group").next(".control-group").setStyle("display", "none");
    button.on("change", function (e) {
        var checkbox = e.target;    
        if(checkbox.get('checked')) {
            alert("it is checked");
            checkbox.ancestor(".control-group").next(".control-group").setStyle("display", "block");
        } else {
            checkbox.ancestor(".control-group").next(".control-group").setStyle("display", "none");
        }           
    });
});

<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
<div class="control-group form-inline"> 
    <label class="checkbox" for="ckbox"> 
        <input id="ckbox-hiden" name="ckbox-hiden" type="hidden" value="true" /> 
        <input class="field checkbox-checked" id="ckbox" name="ckbox" type="checkbox" value="true" />         
            Show div
    </label> 
</div>
<div class="control-group"> 
    <p>HIDE THIS</p>
</div>