如何链接索引相同的元素

-1

.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应该改变的背景为绿色。

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

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

我需要使用JavaScript代码才能实现此功能。

我该如何达到这个结果？

Jquery比欢迎。

来源

2017-04-26 Yash Yadav

请分享您的代码。 – athi

@athimohan更新。 –

你在哪里应用上面定义的toggleColor类？ – Kosch

请检查代码可能会解决您的问题

感谢

jQuery('.buttons p').click(function(){ 
 
    var ClickedElemenet = jQuery(this).index(); 
 
    var GetElement = jQuery('.weChangeColor p').get(ClickedElemenet); 
 
    jQuery(GetElement).toggleClass('toggleColor'); 
 
});

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

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

 
.toggleColor { 
 
    background: green !important; 
 
}

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

来源

2017-04-26 11:59:22

正确的答案，更容易理解。 –

尽量使其在JS使用jQuery这样的：

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

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

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

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

或用class和id或数据使其

来源

2017-04-26 11:50:00

您正在手动赋值n。我需要它是自动的。 –

@YashYadav你现在可以检查 –

您可以使用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>

来源

2017-04-26 11:50:45 Titus

真棒和准确。 –

对于纯CSS的解决方案，您可以通过给id每个p

像这样使用伪类:target和目标p：

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

 
:target { 
 
    background: green; 
 
}

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

 
<div class="weChangeColor"> 
 
    <p id="p1">FirstPara</p> 
 
    <p id="p2">SecondPara</p> 
 
    <p id="p3">ThirdPara</p> 
 
</div>

来源

2017-04-26 11:51:25

你的回答完全正确，但不符合我的情况。除此之外它是正确的。 –

如何链接索引相同的元素

回答

相关问题