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等事件中。

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

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

4 个答案: