Question

JS，CSS，HTML：

＆＃13;

jQuery(function(){
  jQuery('#showall').click(function(){
    jQuery('.content').show();
  });
  
  jQuery('#button').click(function(){
    jQuery('#extracontent'+$(this).attr('target')).slideToggle();
  });
});

＆＃13;

h1 {font-family:Oswald; text-shadow:1px 1px 0px crimson; color:white;}
h2 {font-family:Rokkitt; color:crimson; letter-spacing:-1px;}
#area1 {background-color:#323232; margin-bottom:10px; padding:10px;}
#area2 {background-color:#323232; margin-bottom:10px; padding:10px;}
#area3 {background-color:#323232; margin-bottom:10px; padding:10px;}

button {padding:5px; border-radius:0px; -webkit-appearance:none; border:none; font-size:18px; width:80px;  height:40px; color:white; background-color:crimson; font-family:Oswald;}

＆＃13;

<link href='https://fonts.googleapis.com/css?family=Rokkitt|Oswald' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="all-content">
  <div class="content" id="area1" target="1">
    <h1>Heading 1</h1>
    <h2>Here is some sub-text</h2>
    <button id="button" class="button1" target="1" value="Hide">Hide</button>

    <div class="extra-content" id="extracontent1" target="1">
      <p>Here is some extra content</p>
    </div>
  </div>
  
  <div class="content" id="area2" target="2">
    <h1>Heading 2</h1>
    <h2>Here is some sub-text</h2>
    <button id="button" class="button2" target="2" value="Hide">Hide</button>

    <div class="extra-content" id="extracontent2" target="2">
      <p>Here is some extra content</p>
    </div>
  </div>
  
  <div class="content" id="area3" target="2">
    <h1>Heading 3</h1>
    <h2>Here is some sub-text</h2>
    <button id="button" class="button3" target="3" value="Hide">Hide</button>

    <div class="extra-content" id="extracontent3" target="3">
      <p>Here is some extra content</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您的代码无效，因为您对多个元素使用相同的ID。 ID必须是唯一的，只有一个元素可以有一个ID。请改用班级而且我发现你确实使用了独特的课程，你可能只是将这两个课程搞混了。

参见示例：

jQuery(function(){
  jQuery('#showall').click(function(){
    jQuery('.content').show();
  });
  
  jQuery('.button').click(function(){
    jQuery('#extracontent'+$(this).attr('target')).slideToggle();
  });
});

h1 {font-family:Oswald; text-shadow:1px 1px 0px crimson; color:white;}
h2 {font-family:Rokkitt; color:crimson; letter-spacing:-1px;}
#area1,#area2,#area3 {background-color:#323232; margin-bottom:10px; padding:10px;}

button {padding:5px; border-radius:0px; -webkit-appearance:none; border:none; font-size:18px; width:80px;  height:40px; color:white; background-color:crimson; font-family:Oswald;}

<link href='https://fonts.googleapis.com/css?family=Rokkitt|Oswald' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="all-content">
  <div class="content" id="area1" target="1">
    <h1>Heading 1</h1>
    <h2>Here is some sub-text</h2>
    <button class="button" id="button1" target="1" value="Hide">Hide</button>

    <div class="extra-content" id="extracontent1" target="1">
      <p>Here is some extra content</p>
    </div>
  </div>
  
  <div class="content" id="area2" target="2">
    <h1>Heading 2</h1>
    <h2>Here is some sub-text</h2>
    <button class="button" id="button2" target="2" value="Hide">Hide</button>

    <div class="extra-content" id="extracontent2" target="2">
      <p>Here is some extra content</p>
    </div>
  </div>
  
  <div class="content" id="area3" target="2">
    <h1>Heading 3</h1>
    <h2>Here is some sub-text</h2>
    <button class="button" id="button3" target="3" value="Hide">Hide</button>

    <div class="extra-content" id="extracontent3" target="3">
      <p>Here is some extra content</p>
    </div>
  </div>
</div>

如果您愿意，可以更改此行：
jQuery('#extracontent'+$(this).attr('target')).slideToggle();
到这一行：
jQuery($(this).next('.extra-content')).slideToggle(); （http://api.jquery.com/next/）。
这样，您就不需要HTML中的target或id标记。
在您的CSS中，您可以执行以下操作，而不是为#area1，#area2和#area3创建三个相同的规则：#area1,#area2,#area3 {...}。（我已经在我的答案代码中实现了它。）
至于jQuery('#showall').click(function(){ ...代码中没有id="showall"的元素，所以目前这段代码没有做任何事情。但是当你添加那个元素时，代码也应该起作用。

我不明白你的意思是“改变每个值”，我没有看到任何能够达到这个目的的代码。如果你能详细说明，我也会尝试为你找到解决方案......

Answer 2

试试这个js代码并享受.........

jQuery(document).ready(function(){
	jQuery('.button1').click(function(){
		   jQuery('#extracontent1').slideToggle();
	});
	jQuery('.button2').click(function(){
		   jQuery('#extracontent2').slideToggle();
	});
	jQuery('.button3').click(function(){
		   jQuery('#extracontent3').slideToggle();
	});
});

h1 {font-family:Oswald; text-shadow:1px 1px 0px crimson; color:white;}
h2 {font-family:Rokkitt; color:crimson; letter-spacing:-1px;}
#area1 {background-color:#323232; margin-bottom:10px; padding:10px;}
#area2 {background-color:#323232; margin-bottom:10px; padding:10px;}
#area3 {background-color:#323232; margin-bottom:10px; padding:10px;}

button {padding:5px; border-radius:0px; -webkit-appearance:none; border:none; font-size:18px; width:80px;  height:40px; color:white;
	background-color:crimson; font-family:Oswald;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="all-content">
<div class="content" id="area1" target="1">
	
    <h1>Heading 1</h1>
    <h2>Here is some sub-text</h2>
	<button id="button" class="button1" target="1" value="Hide">Hide</button>
    
    <div class="extra-content" id="extracontent1" target="1">
    	
        <p>Here is some extra content</p>
    
    </div>
    
</div>

<div class="content" id="area2" target="2">

	<h1>Heading 2</h1>
    <h2>Here is some sub-text</h2>
	<button id="button" class="button2" target="2" value="Hide">Hide</button>
	
    <div class="extra-content" id="extracontent2" target="2">
    	
        <p>Here is some extra content</p>
    
    </div>
    
</div>


<div class="content" id="area3" target="2">

	<h1>Heading 3</h1>
    <h2>Here is some sub-text</h2>
	<button id="button" class="button3" target="3" value="Hide">Hide</button>

    <div class="extra-content" id="extracontent3" target="3">
    	
        <p>Here is some extra content</p>
    
    </div>
    
</div>


</div>

如何隐藏和显示多个div并更改每个值

2 个答案: