如何鏈接索引相同的元素

-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

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

如何鏈接索引相同的元素

回答

相關問題