jQuery的添加类来选择一个选定的元素

Question

I want to change the color of the paragraph with a single button click.In my code, i have 3 paragraph and 3 buttons. My code is working fine. but when I click a button it will change the color of other paragraphs too.I only want to change the color of the paragraph that contains the button. I want to add the class only to that paragraph section with the button.

  function changecolor() { $('.section1').addClass('color'); } 

 .section1{ width: 50%; background-color: #ccc; padding: 10px 0; margin: 10px; } .btn{ background-color: red; padding: 10px; border: 1px solid #ccc; } .section1.color{ background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div class="section1"> <a href="#" class="btn" onclick="changecolor()"> Button </a> <p class="text" > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> <div class="section1"> <a href="#" class="btn" onclick="changecolor()"> Button </a> <p class="text" > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> <div class="section1"> <a href="#" class="btn" onclick="changecolor()"> Button </a> <p class="text" > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> 

Answer 1

Instead of function use event and you can easily handle it with this and no need to add the function to each button in the html.

 $('.btn').click(function() { $(this).parent().addClass('color'); }) 

 .section1 { width: 50%; background-color: #ccc; padding: 10px 0; margin: 10px; } .btn { background-color: red; padding: 10px; border: 1px solid #ccc; } .section1.color { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div class="section1"> <a href="#" class="btn"> Button </a> <p class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> <div class="section1"> <a href="#" class="btn"> Button </a> <p class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> <div class="section1"> <a href="#" class="btn"> Button </a> <p class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> 

And if you want to remove the color of previous element simply do this:

 $('.btn').click(function() { $('.color').removeClass('color'); $(this).parent().addClass('color'); }) 

 .section1 { width: 50%; background-color: #ccc; padding: 10px 0; margin: 10px; } .btn { background-color: red; padding: 10px; border: 1px solid #ccc; } .section1.color { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div class="section1"> <a href="#" class="btn"> Button </a> <p class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> <div class="section1"> <a href="#" class="btn"> Button </a> <p class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> <div class="section1"> <a href="#" class="btn"> Button </a> <p class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div>