изменение видимости div

Question

У меня есть раздел div, который имеет определенный атрибут (mdxquery), этот атрибут будет отправлен в файл 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

Try:

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

Answer 2

Ваш Селектор неправильно, просто попробуйте это,

$("#State").click(function() { 
    if($("#State").is(":checked")) { 
      $('.first,.second').hide(); 
      $('.third').show(); 
     } 
    }); 

Пожалуйста, прочитайте: class selector