jQuery隐藏或显示元素，取决于其他元素的类

Question

I would like to hide/show an element depending on the class of a specific element in the page (the class changes whether the element is selected or not). How could I do that with jQuery? I thought about using the click() or change() function and then check the element's class to hide() or show() the other element.

I try with the following code but it does not work:

 <script> jQuery(document).ready(function() { disableSectorAnalysis(); }); function disableSectorAnalysis(){ jQuery('#ygvtableel66').click(function(){ if (jQuery('#ygvtableel66').attr("class") == "ygtvtable ygtvdepth2 ygtv-highlight0") { jQuery('select[id*="SectorGliederung"]').hide(); } else jQuery('select[id*="SectorGliederung"]').show(); }); } </script> 

The html code is the following. A 3-level tree is generated with Primefaces 2.2.1 library and I would like to hide/show the "Sectorgliederung element" when a specific node is unchecked/checked. But in Primefaces 2.2.1 there does not seem to be a method to trigger an event on a specific node selection, which is why I am trying to access the value of each node through jQuery.

 <div class="punktlinie958"></div> <h2>Fondsmodulauswahl</h2> <table class="Formular" width="944px"> <tr> <th>Fondsmodule<br/>inkl. Zusatzmodule</th> <td> <p:tree value="#{treeFonds.root}" var="node3" selectionMode="checkbox" selection="#{treeFonds.selectedNodes}" propagateSelectionDown="true" propagateSelectionUp="true" expandAnim="FADE_IN" collapseAnim="FADE_OUT"> <p:treeNode> <h:outputText value="#{node3}"/> </p:treeNode> <p:treeNode type="nodesFondsAnalyseKlein" > <h:outputText value="#{node3}"/> </p:treeNode> <p:treeNode type="nodesPerformanceNetto"> <h:outputText value="#{node3}"/> </p:treeNode> <p:treeNode type="nodesPerformanceBrutto"> <h:outputText value="#{node3}"/> </p:treeNode> <p:treeNode type="nodesFondsAnalyseMittel"> <h:outputText value="#{node3}"/> </p:treeNode> <p:treeNode type="nodesFondsAnalyseGroß"> <h:outputText value="#{node3}"/> </p:treeNode> <p:treeNode type="nodesZusatzFonds"> <h:outputText value="#{node3}"/> </p:treeNode> </p:tree> </td> </tr> <tr> <th>Aktienanalyse<br/>nach Sektoren **</th> <td> <h:selectOneMenu id="SectorGliederung" value="#{fondsBean.fonds2mappe.sectorgliederung.id}" disabled="#{sitzungBean.prio1Disabled}" styleClass="gross" style="float:left"> <f:selectItems value="#{fondsBean.sectorgliederung}" /> </h:selectOneMenu> </td> </tr> 

Thank you for your help.

Answer 1

You can use code like this:

 $(document).ready(function() { hideElement(); }); function hideElement(){ $(document).on('change', '.changingelement', function(){ if($(this).val() === "on"){ $('#element').hide(); } else { $('#element').show(); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="changingelement" value="on" class="changingelement">On <br/> <input type="radio" name="changingelement" value="off" class="changingelement">Off <div id="element">This is toggle div</div> 

Answer 2

I hope this sample code will help you out:

 var divList = $(".parent div"); divList.each(function() { if ($(this).hasClass("active")) { $(this).addClass("color");//I have changed the color /* *You can hide/show or do any other function here. */ } }); 

 .color { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div>Inactive</div> <div>Inactive</div> <div class="active">This is the only active element.</div> <div>Inactive</div> <div>Inactive</div> <div>Inactive</div> </div> 

In the above example, active class has to be added when you are selecting the element. This class can come handy while performing other functions, that might be specific to the selected elements only. [Can be added on any of the events like change , click , blur , focus etc.]

Here is the reference fiddle for this solution.

Answer 3

It's working for me. see this

http://jsfiddle.net/DfPbJ/1/

your HTML

<div class="statecontent state1">State1 Specific Page Content Goes here</div><br />
<div class="statecontent state1">State1 Specific Page2 Content Goes here</div><br />
<div class="statecontent state2">State2 Specific Page Content Goes here</div><br />
<div class="statecontent state3">State3 Specific Page Content Goes here</div><br />

<select id="myselector">
<option value="state1"></option><br />
<option value="state2"></option><br />
<option value="state3"></option><br />
</select>

your JQuery

$('.statecontent').hide();
$('#myselector').change(function() {
$('.statecontent').hide();
$('.' + $(this).val()).show();    
});

Answer 4

your html like

<div id="changingelement" class="test"></div>

<div id="test"> test class details </div>

<span id="notTest"> Hello </span>

And your script will be,

if($('#changingelement').hasClass("notTest"))
{
  $('#test').hide();
} 
else($('#changingelement').hasClass("test"))
{
  $("#notTest").hide();
}