jQuery隱藏或顯示元素，取決於其他元素的類

Question

我想根據頁面中特定元素的類來隱藏/顯示一個元素（該類會更改是否選擇該元素）。 我該如何使用jQuery？ 我考慮過使用click（）或change（）函數，然后檢查該元素的類來隱藏（）或show（）其他元素。

我嘗試使用以下代碼，但它不起作用：

 <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> 

html代碼如下。 Primefaces 2.2.1庫生成了一個三層樹，當未選中/選中特定節點時，我想隱藏/顯示“ Sectorgliederung元素”。 但是在Primefaces 2.2.1中，似乎沒有一種方法可以在特定的節點選擇上觸發事件，這就是為什么我試圖通過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> 

謝謝您的幫助。

Answer 1

您可以使用如下代碼：

 $(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

我希望此示例代碼可以為您提供幫助：

 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> 

在上面的示例中，選擇元素時必須添加active類。 在執行其他功能時，此類可能會派上用場，而這些功能可能僅特定於所選元素。 [可以添加到任何事件中，例如change ， click ， blur ， focus等。]

這是此解決方案的參考小提琴。

Answer 3

它為我工作。 看到這個

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

您的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>

您的JQuery

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

Answer 4

你的HTML喜歡

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

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

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

您的腳本將是

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