<div class="item" rel="a">1</div>
<div class="item" rel="b">2</div>
<div class="receive" rel="a">1</div>
<div class="receive" rel="b">2</div>
.item[rel='a'] {
width:50px;
height:50px;
background: pink;
}
.item[rel='b'] {
width:50px;
height:50px;
background: orange;
margin-left:20px;
}
.receive {
margin-top:20px;
border:1px solid;
width:50px;
height:50px;
}
如何让接收器接收物品的颜色?我能做到
bg = $('.item').css('background');
$('.receive').css('background',bg);
但我希望它能够使用'rel'属性进行匹配,我有多个接收器。我应该循环吗?
答案 0 :(得分:2)
在每个循环中执行。
$('.item').each(function(idx) {
var rel = $(this).attr('rel');
var bg = $(this).css('background');
$('.recieve[rel="' + rel + '"]').css('background', bg);
});
我想这就是你想要的。
您可以循环遍历.item
或.recieve
,在一天结束时无关紧要。
这是一个小提琴,表明它有效:http://jsfiddle.net/Lg6yw7bj/1/
答案 1 :(得分:0)
.css()
方法接受回调函数,以便您可以使用它。
你可以试试这个:
$('.recieve').addClass('item'); // just add the class to make it work.
/*$('.recieve').css('background', function(i){
return $('.item').eq(i).css('background');
});*/
.item[rel='a'] {
width: 50px;
height: 50px;
background: pink;
}
.item[rel='b'] {
width: 50px;
height: 50px;
background: orange;
margin-left: 20px;
}
.recieve {
margin-top: 20px;
border: 1px solid;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" rel="a">1</div>
<div class="item" rel="b">2</div>
<div class="recieve" rel="a">1</div>
<div class="recieve" rel="b">2</div>