Question

我有字体很棒的跨度但是我使用的数据表有一个搜索栏。这是我的代码：

<td><i class="fa fa-circle red_star"></i><i class="fa fa-circle yellow_star"></i><i class="fa fa-circle green_star" aria-hidden="true"></i></td>
<td><span class='gray_star' id='<?= $p->id?>' ><i class="fa fa-star"></i></span></td>

有没有办法，如果我输入＆＃34;红色＆＃34;在我的搜索栏中，红色的星形会显示，如果我输入绿色，绿色的星形与节目等？

Answer 1

这样的东西？

＆＃13;

$(function() {

  $("#x").on("input",function() {
    var val = this.value;
    if (["red","yellow","green"].indexOf(val) !=-1) {
      $(".star").hide();
      $("."+val+"_star").show();
    }
    else {
      $(".star").show();
    }
  })
})

＆＃13;

.red_star { color:red; }
.yellow_star { color:yellow; }
.green_star { color:green;  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<input id="x" type="text" />
<table>
<tr>
<td>
<i class="fa fa-circle red_star star"></i>
<i class="fa fa-circle yellow_star star"></i>
<i class="fa fa-circle green_star star" aria-hidden="true"></i></td>
<td><span class='gray_star' id='<?= $p->id?>' >
<i class="fa fa-star"></i></span></td>
</tr>
</table>

＆＃13;

使图标可搜索

1 个答案: