我正在尝试更改符合给定输入条件的项目的背景颜色css属性:
我的HTML:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
<input type="text" id="input" class="input" value="" />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">aaaaaa</div>
<div id="small12" class="small">aaabaa</div>
<div id="small13" class="small">aaacaa</div>
<div id="small14" class="small">aaadaa</div>
<div id="small15" class="small">aaaeaa</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
</body>
</html>
因此,如果在输入中“用户”输入:“aebdc”,则应将#small55 background-color更改为黄色。 如果在输入中只有一个:“a”,它应该改变所有div的背景颜色。 显然,如果没有一个符合标准,则不会改变。
答案 0 :(得分:2)
您可以根据DIV的文字内容进行过滤
$('#input').on('input', function() {
var value = this.value;
$('.global div').css('background', '').filter(function() {
return $(this).text().indexOf(value) !== -1;
}).css('background', 'red');
});
如果您需要不区分大小写的搜索,请将toLowerCase
添加到值和文本中。
答案 1 :(得分:1)
<强> JQuery的强>
$('#input').on('input', function() {
var input = $('#input').val();
if(input.length == 6) {
$( ".global div:contains(" + input + ")" ).css( "background", "#" + input );
}
});
答案 2 :(得分:0)
您需要使用:contains()
进行过滤,然后使用text()
将背景设置为div的文本值:
$('#input').on('input', function() {
var value = this.value;
// reset
$('div.global div').css( "background-color", "inherit");
// set new bgs
$('div.global div:contains(' + value + ')').css( "background-color", function() {
return '#' + $(this).text();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="input" class="input" value="" />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">aaaaaa</div>
<div id="small12" class="small">aaabaa</div>
<div id="small13" class="small">aaacaa</div>
<div id="small14" class="small">aaadaa</div>
<div id="small15" class="small">aaaeaa</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
答案 3 :(得分:0)
这是
//bind input change event handler
jQuery("#input").on('change',function(){
//input that user entered
var input = jQuery(this).val();
//for every .small class element do the following
jQuery('.small').each(function(){
//this is the text written in each div
var text = jQuery(this).text().trim();
//if user input is substring of text
//then give it custom class
//othervise remove that class
if( input == text.substring(0,input.length) ){
jQuery(this).addClass("match");
}else{
jQuery(this).removeClass('match')
}
})
})
&#13;
.match{
background-color: yellow;
}
&#13;
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
<input type="text" id="input" class="input" value="" />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">aaaaaa</div>
<div id="small12" class="small">aaabaa</div>
<div id="small13" class="small">aaacaa</div>
<div id="small14" class="small">aaadaa</div>
<div id="small15" class="small">aaaeaa</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
</body>
</html>
&#13;