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

Question

JS、CSS、HTML:

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 {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;}

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

Answer 1

试试这个 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>