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")) {
          $('.first,.second').hide();
          $('.third').show();
         }
   });

请阅读：class selector

Answer 2

尝试：

$("#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') ;
    }
});

OR

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

改变div的可见性

2 个答案: