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

Question

我想根据页面中特定元素的类隐藏/显示一个元素（无论元素是否被选中，类都会改变）。我怎么能用 jQuery 做到这一点？我考虑过使用 click() 或 change() 函数，然后检查元素的类以 hide() 或 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 库生成一个 3 级树，我想在未选中/选中特定节点时隐藏/显示“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 等]

Here 是此解决方案的参考小提琴。

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();
}