javascript - 如何链接相同的索引元素

Question

.buttons,
.weChangeColor {
  width: 50%;
  height: 100%;
  float: left;
}

.weChangeColor p {
  background: red;
  border: 1px solid;
}

.toggleColor {
  background: green;
}

<div class="buttons">
  <p><a href="#">FirstLink</a></p>
  <p><a href="#">SecondLink</a></p>
  <p><a href="#">ThirdLink</a></p>
</div>

<div class="weChangeColor">
  <p>FirstPara</p>
  <p>SecondPara</p>
  <p>ThirdPara</p>
</div>

在上面的代码中，我想要的是，当单击第一个 link 时，首先 p 应该将背景更改为 green 。

单击第二个链接时，第二个 p 应将背景更改为绿色，依此类推。

基本上链接具有相同索引的不同类的相同元素。

我需要实现此目的所需的 JavaScript 代码。

我怎样才能达到这个结果？

Jquery 非常受欢迎。

Answer 1

您可以使用 jQuery index() 和 eq() 函数。

这是一个例子:

$(".buttons p").click(function(){
   $(".weChangeColor p").eq($(this).index()).toggleClass("toggleColor");
   $(this).toggleClass("toggleColor");
});

.buttons,
.weChangeColor {
  width: 50%;
  height: 100%;
  float: left;
}

.weChangeColor p {
  background: red;
  border: 1px solid;
}

p.toggleColor {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <p><a href="#">FirstLink</a></p>
  <p><a href="#">SecondLink</a></p>
  <p><a href="#">ThirdLink</a></p>
</div>

<div class="weChangeColor">
  <p>FirstPara</p>
  <p>SecondPara</p>
  <p>ThirdPara</p>
</div>