Question

我用过这个：

$('#srch').click(function(){
  var s='';
  s = $('#gt').val();
  if (s == '')
  {
    $("p") .addClass("default");
  } else {
    $("p:contains('"+ s +"')") .addClass("active");
  }
});

它的工作，但它继续存储以前的数据。我希望清除以前的数据。

Answer 1

使用removeClass()删除突出显示的元素类

$('#srch').click(function(){
$("p").removeClass("active"); 
...
}

Answer 2

要在搜索后清除输入，请使用$(...).val('')：

$('#srch').click(function(){
    var s='';   
    s = $('#gt').val();
    $('#gt').val('');
    if (s == ''){       
        $("p") .addClass("default");    
    } else{
        $("p:contains('"+ s +"')") .addClass("active"); 
    }
});

Answer 3

检查

 $('#srch').on("click",function(){
    var s = $('#gt').val();
    $("p").removeClass("active")
    if (s == ''){       
        $("p").addClass("default");    
    } else{
        $("p:contains('"+ s +"')").addClass("active"); 
    }
});

<强> Working Fiddle Demo

Answer 4

使用ternary operator，您可以单行执行此操作。

＆＃13;

$('#srch').click(function(){
    $("p") .removeClass("active") ;
    var s='';   
    s = $('#gt').val();
    s == ''?  $("p") .addClass("default")  : $("p:contains('"+ s +"')") .addClass("active"); 
});

＆＃13;

.default {
  background: green;
}
.active {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a test contain</p>
<input type='text' id='gt'/>
<input type='button' id='srch'>

＆＃13;

突出显示在网页的搜索框中输入的关键字

4 个答案: