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

我正在寻找一种动态查看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>

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

最佳答案

为了同时保留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>

关于jquery - jQuery动态CSS选择器不区分大小写，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16331698/