Question

我正在尝试更改符合给定输入条件的项目的背景颜色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的背景颜色。显然，如果没有一个符合标准，则不会改变。

Answer 1

您可以根据DIV的文字内容进行过滤

$('#input').on('input', function() {

    var value = this.value;

    $('.global div').css('background', '').filter(function() {
        return $(this).text().indexOf(value) !== -1;
    }).css('background', 'red');
});

FIDDLE

如果您需要不区分大小写的搜索，请将toLowerCase添加到值和文本中。

Answer 2

<强> JQuery的

$('#input').on('input', function() {    
  var input = $('#input').val();

  if(input.length == 6) {
    $( ".global div:contains(" + input + ")" ).css( "background", "#" + input );
  }

});

Answer 3

您需要使用: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>

Answer 4

这是

＆＃13;

//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;

使用jQuery

4 个答案: