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

Question

我想通过单击一个按钮来更改段落的颜色。在我的代码中，我有3个段落和3个按钮。我的代码工作正常。但是当我单击一个按钮时，它也会更改其他段落的颜色。我只想更改包含该按钮的段落的颜色。我只想通过按钮将类添加到该段落部分。

    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

代替函数使用事件，您可以轻松地使用this处理它，而无需将函数添加到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>

如果要删除上一个元素的颜色，只需执行以下操作：

$('.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>