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>

jquery动态css选择器Case Insensitive

1 个答案: