需求一个js 或者 jq 通过点击一个按钮，来改变2个div的背景颜色
<!DOCTYPEhtml><html><head><title></title></head><body><style>.div1{width:100px;height...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style>
.div1{ width:100px; height:100px; background:#00F;}
.div2{ width:100px; height:100px; background:#f00;}
.div3{ width:100px; height:100px; background:#3F6;;}
</style>
<div class="div1"><input name="" type="checkbox" value="">AAAAAA</div>
<br>
<div class="div2"><input name="" type="checkbox" value="">BBBBBB</div>
<br>
<div class="div3"><input name="" type="checkbox" value="">cccccc</div>
<br>
<input name="" type="button" value="点击">
</body>
</html>
如我选中A和B 在点击按钮，那么A和B的背景颜色就互换，或者我点A和C 则A和C的背景颜色互换
但我选中A,B,C 3个的时候，点击提示不能超过3个。 展开
<html>
<head>
<title></title>
</head>
<body>
<style>
.div1{ width:100px; height:100px; background:#00F;}
.div2{ width:100px; height:100px; background:#f00;}
.div3{ width:100px; height:100px; background:#3F6;;}
</style>
<div class="div1"><input name="" type="checkbox" value="">AAAAAA</div>
<br>
<div class="div2"><input name="" type="checkbox" value="">BBBBBB</div>
<br>
<div class="div3"><input name="" type="checkbox" value="">cccccc</div>
<br>
<input name="" type="button" value="点击">
</body>
</html>
如我选中A和B 在点击按钮，那么A和B的背景颜色就互换，或者我点A和C 则A和C的背景颜色互换
但我选中A,B,C 3个的时候，点击提示不能超过3个。 展开
4个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery cookie</title>
<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<title>颜色互换</title>
</head>
<body>
<style>
.div1{ width:100px; height:100px; background:#00F;}
.div2{ width:100px; height:100px; background:#f00;}
.div3{ width:100px; height:100px; background:#3F6;;}
</style>
<div class="div1"><input name="" type="checkbox" value="a">AAAAAA</div>
<br>
<div class="div2"><input name="" type="checkbox" value="b">BBBBBB</div>
<br>
<div class="div3"><input name="" type="checkbox" value="c">cccccc</div>
<br>
<input name="" type="button" value="点击">
<script>
$(function(){
$("input:button").click(function(){
var len = $(":checked").length;
if(len<=1){
alert("请选择两种颜色");
}else if(len>2){
alert("不能超过两种颜色");
}else{
var background1 = $(":checked").eq(0).parent().css("background");
var background2 = $(":checked").eq(1).parent().css("background");
$(":checked").eq(0).parent().css("background",background2);
$(":checked").eq(1).parent().css("background",background1);
}
});
});
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>test</title>
<style>
.div1{
width:100px;
height:100px;
background:#00F;
}
.div2{
width:100px;
height:100px;
background:#f00;
}
.div3{
width:100px;
height:100px;
background:#3F6;
}
</style>
<script>
var exchange = function(){
var cks = document.getElementsByName("ck");
var count = 0;
var arr = [];
for(var i = 0; i < cks.length; i++){
var cksi = cks[i];
if(cksi.checked){
count++;
arr.push(cksi);
}
}
if(count > 2){
alert("不能超过3个");
}else if(count == 2){
var div1 = arr[0].parentElement,
div1c = getStyle(div1, "backgroundColor");
var div2 = arr[1].parentElement,
div2c = getStyle(div2, "backgroundColor");
div1.style.backgroundColor = div2c;
div2.style.backgroundColor = div1c;
}
}
var getStyle = function(dom, attr){
return dom.currentStyle ?
dom.currentStyle[attr]
: getComputedStyle(dom, false)[attr];
}
</script>
</head>
<body>
<div class="div1">
<input name="ck" type="checkbox" value="" />
AAAAAA
</div>
<br / >
<div class="div2">
<input name="ck" type="checkbox" value="" />
BBBBBB
</div>
<br / >
<div class="div3">
<input name="ck" type="checkbox" value="" />
cccccc
</div>
<br / >
<input type="button" value="点击" onclick="exchange()" />
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script>
$(function(){
$("input[type='button']").click(function(){
if($("input[type='checkbox']:checked").size() > 2){
alert(" > 2");
return;
}
var a = $("input[type='checkbox']:checked").eq(0).parent().css("background-color");
var b = $("input[type='checkbox']:checked").eq(1).parent().css("background-color");
$("input[type='checkbox']:checked").eq(0).parent().css("background-color", b);
$("input[type='checkbox']:checked").eq(1).parent().css("background-color", a);
});
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$("#click").click(function(){
var checkboxes = $("input");
var checkedSum = 0;
var checkedArr = [];
for(var i=0;i<checkboxes.length;i++){
if (checkboxes[i].checked){
checkedSum++;
checkedArr.push(checkboxes[i]);
}
}
if (checkedSum != 2){
alert("请选择2个!")
return ;
}
var div1 = $(checkedArr[0]).parent('div');
var div2 = $(checkedArr[1]).parent('div');
var div1_color = $(div1).css('background-color');
var div2_color = $(div2).css('background-color');
$(div1).css('background-color', div2_color);
$(div2).css('background-color', div1_color);
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
