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>