9

私がやろうとしているのは、製品のフィルターを作成することです。画像といくつかの情報を含むデータベースから製品を取得しています。次のようなフィルターが必要です: PRODUCT と BRAND

私はこのコードを持っていますが、ブランド 1 + 製品 2 のような 2 つのフィルターを選択すると、ブランド 1 のすべての製品とすべての製品番号 2 が表示されます。

これが私のコードです：

HTML+PHP

<div id="row" class="row">

<?php

if(!empty($_GET["category"])){
  include('open_conexion.php');
  $sql = "SELECT * FROM products WHERE category='".$_GET["category"]."'";

  $result = mysql_query($sql);

  while ($row = mysql_fetch_array($result)) {

  ?>

  <div class="col-lg-4"  data-category="<?php echo $row['product'];?>" brand="<?php echo $row['brand'];?>" >
      <img  class="img-circle" src='images/<?php echo $row['imag']; ?>'  width="180px;" height="180px;"alt="">
      <h4><?php echo $row['product']." ". $row['brand']; ?></h4>
      <p><?php echo $row['description'];?> </p>
      <p><a class="btn btn-default" href='detalles.php?id=<?php echo $row['id_product']?>'>View Details &raquo;</a></p>

</div><!-- /.col-lg-4 -->



  <?php } } ?>


  </div><!-- /.row -->

そしてjQuery：

 <script>
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
    $('.row >div').hide();


    $('input[type="checkbox"]:checked').each(function() {
        $('.row >div[data-category=' + this.value + ']').show();
        $('.row >div[brand=' + this.value + ']' ).show();

    });
} else {
    $('.row >div').show();


}
});

ありがとう

4

4 に答える 4

0

コードの最も問題のある行 (フィルタリングに関して) は、おそらく次の 2 行です。

$('.row >div[data-category=' + this.value + ']').show();
$('.row >div[brand=' + this.value + ']' ).show();

ここでは、「 data-category=value のすべてのdivを表示し、 brand=valueのすべてのdivを表示する」と明示的に言います。

実際に必要なのは、「data-category=valueおよびbrand=valueのすべてのdiv を表示する」ことです。

あなたは次のようなことを試してみたいかもしれません

$('input[type="checkbox"]:checked').each(function() {
    $('.row >div[data-category=' + this.value + '][brand=' + this.value + ']').show();    
});

また、コード内のいくつかの余分な落とし穴 (フィルタリングの問題とは関係ありません):

1）非常に単純なSQLインジェクションの可能性

$sql = "SELECT * FROM products WHERE category='".$_GET["category"]."'";

2) DOM 内のすべてのチェックボックスにクリック イベントをバインドします。フィルタリングを意図していないチェックボックスであっても、クリック イベントの代わりに変更イベントを使用する方が適切です (チェックボックスの状態をキーボードから変更するだけでなく、キーボードから変更することもできます)。マウスクリック）

$('input[type="checkbox"]').click(function() {
于 2013-11-12T02:10:27.097 に答える
0

ここでは単純にしましょう。

すべてを非表示にしてから一部を表示するのではなく、すべてを表示してから一致しないものを非表示にします。

// Show all at the beginning
$('.row >div').show();

// For each item...
$('.row > div ).each(function(){
    var $item = $(this);

    // Check against each checkbox...
    $('input[type="checkbox"]:checked').each(function() {
        var $checkbox = $(this), pass = false;
        if($item.attr('data-category') == $checkbox.value) pass = true;
        if($item.attr('brand') == $checkbox.value) pass = true;

        // and if the brand or category doesn't match the checkbox value, hide it

        if(!pass) $item.hide();

    });
});
于 2014-02-24T14:50:43.320 に答える