jquery - jquery动态css选择器不区分大小写

Question

我正在寻找一种方法来动态查看 img 是否有一个包含用户输入的字符串的 alt 标签一切正常，但我想让它不区分大小写以提高可用性

我的PHP

<div class="box">
<div class="box-heading"><span><?php echo $heading_title; ?></span> <input type="text"     id="refine" placeholder="refine"></div>
<div class="box-content">
<div class="box-category">
  <ul class="manufacturers">
    <?php foreach ($manufacturers as $manufacturer) { ?>
    <li class="manufacturer" >
        <a href="<?php echo $manufacturer['href']; ?>">
        <img src="<?php echo $manufacturer['image']; ?>" alt="<?php echo $manufacturer['name']; ?>" />
        </a>
    </li>
    <?php } ?>
  </ul>
</div>

和jQuery

<script>
$("#refine").keyup(function() {
var filter = $(this).val().toLowerCase();
if(filter) {
    $matches = $('.manufacturer a img[alt*=' + filter + '] ');
    console.log($matches);
    $('.manufacturer a img').not($matches).slideUp();
    $matches.slideDown();
} else {
     $('.manufacturer a img').slideDown();
    }
    return false;

});
 </script>

我想在标记中保留制造商名称的大写。

Answer 1

为了既保留alt属性中的大写字母并使其正常工作，您可以在另一个属性中提供小写变体，如下所示：

<div class="box">
<div class="box-heading"><span><?php echo $heading_title; ?></span> <input type="text"     id="refine" placeholder="refine"></div>
<div class="box-content">
<div class="box-category">
  <ul class="manufacturers">
    <?php foreach ($manufacturers as $manufacturer) { ?>
    <li class="manufacturer" >
        <a href="<?php echo $manufacturer['href']; ?>">
        <img src="<?php echo $manufacturer['image']; ?>" alt="<?php echo $manufacturer['name']; ?>" data-filter="<?php echo strtolower($manufacturer['name']); ?>" />
        </a>
    </li>
    <?php } ?>
  </ul>
</div>

和 Javascript

<script>
$("#refine").keyup(function() {
var filter = $(this).val().toLowerCase();
if(filter) {
    $matches = $('.manufacturer a img[data-filter*=' + filter + '] ');
    console.log($matches);
    $('.manufacturer a img').not($matches).slideUp();
    $matches.slideDown();
} else {
     $('.manufacturer a img').slideDown();
    }
    return false;

});
 </script>