javascript - 更改 div 的可见性

Question

我有一个具有特定属性(mdxquery)的div部分，这个属性将被发送到一个js文件，结果将以html显示，但是，我需要改变这个查询，为此我设计了不同的div他们每个人都有不同查询的部分知道我想通过单击我的复选框来更改此部分的可见性，对于每个复选框我必须有特定的 div 和特定的查询，这是我的一段代码，它似乎是真的但不起作用, 有什么问题吗？

   <div class='first query' style="width:80%;" id="mdxQueryEditor"
            dojoType="GeoSOA.Spatialytics.widgets.MdxQueryEditor" title="MDX query editor"
            submitButtonLabel="Submit"
            mdxQuery="SELECT {[Measures].[report]} ON COLUMNS,&#x000A;{[State].[City].members} ON ROWS&#x000A;FROM [ppgis]">
        </div>

<div class='second query' dojoType='GeoSOA.Spatialytics.widgets.MdxQueryEditor' style='width:80%;' mdxQuery='SELECT {[Measures].[report]} ON COLUMNS,&#x000A;{[Boston].[City].members} ON ROWS&#x000A;FROM [ppgis]' submitButtonLabel='Submit'></div>
<div  class='third query' dojoType='GeoSOA.Spatialytics.widgets.MdxQueryEditor' style='width:80%;' mdxQuery='SELECT {[Measures].[report]} ON COLUMNS,&#x000A;{[Allston].[City].members} ON ROWS&#x000A;FROM [ppgis]' submitButtonLabel='Submit'></div>
<div   id="debug" ></div>

脚本:

     $("#State").click( function() {
if($("#State").is(":checked")) {
        /*When the checkbox is checked*/
    $('first query').css('display','none');
    $('second query').css('display','none');
    $('third query').css('display','block') ;


    }

}); 

Answer 1

尝试:

$("#State").click( function() {
    if($("#State").is(":checked")) {
        /*When the checkbox is checked*/
        $('first.query').css('display','none');
        $('second.query').css('display','none');
        $('third.query').css('display','block') ;
    }
}); 

或

$("#State").click( function() {
    if($("#State").is(":checked")) {
        /*When the checkbox is checked*/
        $('.query').not('third').css('display','none');
        $('third.query').css('display','block') ;
    }
});