jquery - 更改 p 标签的不同背景颜色

Question

<div id="r_1" class="white"></div>
<div id="r_2" class="black"></div>
<div id="r_3" class="blue"></div>
<div id="r_4" class="red"></div>
<div id="r_5" class="green"></div>
<div id="r_6" class="white"></div>

<p id="p_r_1"> some...</p>
<p id="p_r_2"> some...</p>
<p id="p_r_3"> some...</p>
<p id="p_r_4"> some...</p>
<p id="p_r_5"> some...</p>
<p id="p_r_6"> some...</p>

在每次 div 点击时，我需要分别更改p标签的不同背景颜色。div有时&p标签的数量可能会有所不同。

Answer 1

var $div = $('div'), $p = $('p');    
// var $div = $('div[id^="r_"]'), $p = $('p[id^="p_r"]');

$div.on('click', function(){
   var ind = $div.index(this);
   $p.eq(ind).addClass(this.className);
});

http://jsfiddle.net/WdJZ6/

Answer 2

​$(document).ready(function(){
   $("#divColurs div").click(function(){

       $("#p_" + $(this).attr("id")).css("background-color",$(this).attr("class"));        
   });
});​

请参阅此处的工作示例：http: //jsfiddle.net/GrgKd/

Answer 3

这将是解决方案：http: //jsfiddle.net/CdFQJ/

$('div[id^="r_"]').click(function() {
    $("#p_" + $(this).attr("id")).css("background-color", $(this).attr("class"));
});