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

问题描述：

我正在寻找一种方式来动态地看，如果IMG拥有包含用户的一切输入的字符串的ALT标签的工作，但我想使它情况下的可用性不敏感jQuery的动态CSS选择器不区分大小写

我的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>

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

的jQuery没有按没有内置的不区分大小写的选择器。你必须写一个函数来进行比较并使用'.filter（）'。 – Barmar 2013-05-02 06:34:54

答

为了既保持在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的动态CSS选择器不区分大小写

相关推荐