0

ユーザーが入力した文字列を含むaltタグがimgにあるかどうかを動的に確認する方法を探していますが、すべてが機能していますが、使いやすさのために大文字と小文字を区別しないようにしたいと考えています

私の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>

マークアップでメーカー名の大文字化を維持したいと思います。

4

1 に答える 1

0

属性の大文字化を保持し、機能さ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>

そしてジャバスクリプト

<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>
于 2013-05-02T08:13:00.330 に答える