html+js实现给class赋值。 不是单个赋值 而是赋值多个。
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>TEST</title><style>.li...
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>TEST</title> <style> .list{ width:250px; height:100px; border:1px solid black; } .main{ margin:0px auto; } .list{ float:left; } input{ margin:50px 50px; } </style> <script src="jquery.js"></script> <script> $(function(){ $('.list').click( function(){ if(!$(this).hasClass('selected')){ $(this).css('background-color','yellow'); $(this).addClass('selected'); var value=$('.mt').val(); $(this).children('input').val(value); }else{ $(this).css('background-color','white'); $(this).children('input').val(''); $(this).removeClass('selected'); } }); }); </script></head><body > <div class="list"> </div> <div class="list"> <input type="text" class="lt" /> </div> <pre></pre> <div class="list"> </div> <div class="list"> <input type="text" class="lt" /> </div> </body></html>以上是我的代码。 我想实现二个框框为一组 单击一个二个框的任意一个就可以实现让二个都变色 而不是一个。 下面二个图是我想得到的效果 但是只能用一次鼠标左键。 图一左键变成图二 图二再次左键变回图一 必须是二个为一组 总共4个框。
展开
1个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style>
.list {
width: 250px;
height: 100px;
border: 1px solid black;
}
.main {
margin: 0px auto;
}
.list {
float: left;
}
input {
margin: 50px 50px;
}
.yellow{
background-color:yellow;
}
</style>
<script src="min.js"></script>
</head>
<body>
<div id="group1">
<div class="list" ></div>
<div class="list" >
<input type="text" class="lt" />
</div>
</div>
<pre></pre>
<div id="group2">
<div class="list" id="group2"></div>
<div class="list" id="group2">
<input type="text" class="lt" />
</div>
</div>
<script>
$(function () {
$('#group1').click(function(){
if(!$(this).children().hasClass('yellow')){
$(this).children().addClass('yellow')
}else {
$(this).children().removeClass('yellow')
}
})
$('#group2').click(function(){
if(!$(this).children().hasClass('yellow')){
$(this).children().addClass('yellow')
}else {
$(this).children().removeClass('yellow')
}
})
// $('.list').click(function () {
// if (!$(this).hasClass('selected')) {
// $(this).css('background-color', 'yellow');
// $(this).addClass('selected');
// var value = $('.mt').val();
// $(this).children('input').val(value);
// }
// else {
// $(this).css('background-color', 'white');
// $(this).children('input').val('');
// $(this).removeClass('selected');
// }
// });
});
</script>
</body>
</html>
追问
当点输入框的时候不变动list后面的值 保持当前样子 - - 你这个点输入框也会让list变动
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
