Skip to main content
mejorar formato y gramática
Origen Enlace
Black Sheep
  • 13.6k
  • 9
  • 38
  • 62

Buenas, tengo un catalogo de productos que hice con un while para mostrar todos los productos que tengo en la db, la cosa es que la plantilla que uso trae unos que me gustariagustaría aprovechar para filtrar los productos, la cosa es. Buscando hice algo que medio quedo funcionando, pero al presionar cualquiera de las dos opciones en el option, solo queda el que tiene class=1class=1.

Lo que hice fue con la misma data del while poner  :

<div class="<?php echo $r["moneda"], ?>">

<?php
                            
                            
                            
                            while($r=$query->fetch_array()){ ?> 
                            <div id="productos">
                            <div class="<?php echo $r["moneda"]; ?>">
                            <div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn">
                                <input type="checkbox" name="a" class="checkbox compare_vehicle input-checkbox" id="vehicle_1" />
                                <label for="vehicle_1"></label>
                                <a class="inventory" href="inventory-listing.html">
                                <div class="title"><?php echo $r["nombre"]; ?></div>
                                <img src="../images/productos/<?php echo $r["img"]; ?>" class="preview" alt="preview">
                                <table class="options-primary">
                                    <tr>
                                        <td class="option primary">Body Style:</td>
                                        <td class="spec">Sport Utility Vehicle</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Drivetrain:</td>
                                        <td class="spec">4WD</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Engine:</td>
                                        <td class="spec">4.8L V8</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Transmission:</td>
                                        <td class="spec">8-Speed Tiptronic</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Mileage:</td>
                                        <td class="spec">19,585</td>
                                    </tr>
                                </table>
                                <table class="options-secondary">
                                    <tr>
                                        <td class="option secondary">Exterior Color:</td>
                                        <td class="spec">Dark Blue Metallic</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">Interior Color:</td>
                                        <td class="spec">Black / Titanium Blue</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">MPG:</td>
                                        <td class="spec">15 city / 21 hwy</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">Stock Number:</td>
                                        <td class="spec">590497</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">VIN Number:</td>
                                        <td class="spec">WP1AD29P09LA65818</td>
                                    </tr>
                                </table>
                                <img src="http://demo.themesuite.com/automotive/images/carfax.png" alt="carfax" class="carfax" />
                                <div class="price"><b>Precio:</b><br>
                                    <div class="figure"><?php if($r["moneda"] == 1){echo "$ ".$r["precio"];}elseif($r["moneda"] == 2){echo "Cr ".$r["precio"];} ?><br>
                                    </div>
                                </div>
                                <div class="view-details gradient_button"><i class='fa fa-plus-circle'></i> Ver Detalles </div>
                                <div class="clearfix"></div>
                                </a>
                                <div class="view-video gradient_button" data-youtube-id="3oh7PBc33dk"><i class="fa fa-video-camera"></i> Ver Video</div>
                            </div>
</div>
</div>
                           <?php } ?>

Y este es el jquery que use

<?php  

while ($r = $query->fetch_array()) { ?>
    <div id="productos">
        <div class="<?php echo $r["moneda"]; ?>">
            <div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn">
                <input type="checkbox" name="a" class="checkbox compare_vehicle input-checkbox" id="vehicle_1"/>
                <label for="vehicle_1"></label>
                <a class="inventory" href="inventory-listing.html">
                    <div class="title"><?php echo $r["nombre"]; ?></div>
                    <img src="../images/productos/<?php echo $r["img"]; ?>" class="preview" alt="preview">
                    <table class="options-primary">
                        <tr>
                            <td class="option primary">Body Style:</td>
                            <td class="spec">Sport Utility Vehicle</td>
                        </tr>
                        <tr>
                            <td class="option primary">Drivetrain:</td>
                            <td class="spec">4WD</td>
                        </tr>
                        <tr>
                            <td class="option primary">Engine:</td>
                            <td class="spec">4.8L V8</td>
                        </tr>
                        <tr>
                            <td class="option primary">Transmission:</td>
                            <td class="spec">8-Speed Tiptronic</td>
                        </tr>
                        <tr>
                            <td class="option primary">Mileage:</td>
                            <td class="spec">19,585</td>
                        </tr>
                    </table>
                    <table class="options-secondary">
                        <tr>
                            <td class="option secondary">Exterior Color:</td>
                            <td class="spec">Dark Blue Metallic</td>
                        </tr>
                        <tr>
                            <td class="option secondary">Interior Color:</td>
                            <td class="spec">Black / Titanium Blue</td>
                        </tr>
                        <tr>
                            <td class="option secondary">MPG:</td>
                            <td class="spec">15 city / 21 hwy</td>
                        </tr>
                        <tr>
                            <td class="option secondary">Stock Number:</td>
                            <td class="spec">590497</td>
                        </tr>
                        <tr>
                            <td class="option secondary">VIN Number:</td>
                            <td class="spec">WP1AD29P09LA65818</td>
                        </tr>
                    </table>
                    <img src="http://demo.themesuite.com/automotive/images/carfax.png" alt="carfax" class="carfax"/>
                    <div class="price"><b>Precio:</b><br>
                        <div class="figure"><?php if ($r["moneda"] == 1) {
                                echo "$ " . $r["precio"];
                            } elseif ($r["moneda"] == 2) {
                                echo "Cr " . $r["precio"];
                            } ?><br>
                        </div>
                    </div>
                    <div class="view-details gradient_button"><i class='fa fa-plus-circle'></i> Ver Detalles</div>
                    <div class="clearfix"></div>
                </a>
                <div class="view-video gradient_button" data-youtube-id="3oh7PBc33dk"><i class="fa fa-video-camera"></i>
                    Ver Video
                </div>
            </div>
        </div>
    </div>
<?php } ?>
(function(){
var $tabla = $('#productos');

$('#filtro_moneda').change(function(){
    var value = $(this).val();
    if (value){
        $('div.' + value, $tabla).show();
        $('div:not(.' + value + ')', $tabla).hide();
    }
    else{
        // Se ha seleccionado All
        $('div', $tabla).show();
    }
});
})

Y aqui les dejoeste es el optionjQuery que use:

(function(){
    var $tabla = $('#productos');

    $('#filtro_moneda').change(function(){
        var value = $(this).val();
        if (value){
            $('div.' + value, $tabla).show();
            $('div:not(.' + value + ')', $tabla).hide();
        }
        else{
            // Se ha seleccionado All
            $('div', $tabla).show();
        }
    });
})
<select name="price" class="css-dropdowns" tabindex="1" id="filtro_moneda">
                            <option value="">Metodo de Pago</option>  
   <option value="1">Dolares</option> 
<option value="2">Créditos</option> 
                        </select>
Y aquí les dejo el option:

 
<select name="price" class="css-dropdowns" tabindex="1" id="filtro_moneda">
    <option value="">Metodo de Pago</option>
    <option value="1">Dolares</option>
    <option value="2">Créditos</option>
</select>

Buenas, tengo un catalogo de productos que hice con un while para mostrar todos los productos que tengo en la db, la cosa es que la plantilla que uso trae unos que me gustaria aprovechar para filtrar los productos, la cosa es. Buscando hice algo que medio quedo funcionando, pero al presionar cualquiera de las dos opciones en el option, solo queda el que tiene class=1.

Lo que hice fue con la misma data del while poner  <div class="<?php echo $r["moneda"], ?>">

<?php
                            
                            
                            
                            while($r=$query->fetch_array()){ ?> 
                            <div id="productos">
                            <div class="<?php echo $r["moneda"]; ?>">
                            <div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn">
                                <input type="checkbox" name="a" class="checkbox compare_vehicle input-checkbox" id="vehicle_1" />
                                <label for="vehicle_1"></label>
                                <a class="inventory" href="inventory-listing.html">
                                <div class="title"><?php echo $r["nombre"]; ?></div>
                                <img src="../images/productos/<?php echo $r["img"]; ?>" class="preview" alt="preview">
                                <table class="options-primary">
                                    <tr>
                                        <td class="option primary">Body Style:</td>
                                        <td class="spec">Sport Utility Vehicle</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Drivetrain:</td>
                                        <td class="spec">4WD</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Engine:</td>
                                        <td class="spec">4.8L V8</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Transmission:</td>
                                        <td class="spec">8-Speed Tiptronic</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Mileage:</td>
                                        <td class="spec">19,585</td>
                                    </tr>
                                </table>
                                <table class="options-secondary">
                                    <tr>
                                        <td class="option secondary">Exterior Color:</td>
                                        <td class="spec">Dark Blue Metallic</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">Interior Color:</td>
                                        <td class="spec">Black / Titanium Blue</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">MPG:</td>
                                        <td class="spec">15 city / 21 hwy</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">Stock Number:</td>
                                        <td class="spec">590497</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">VIN Number:</td>
                                        <td class="spec">WP1AD29P09LA65818</td>
                                    </tr>
                                </table>
                                <img src="http://demo.themesuite.com/automotive/images/carfax.png" alt="carfax" class="carfax" />
                                <div class="price"><b>Precio:</b><br>
                                    <div class="figure"><?php if($r["moneda"] == 1){echo "$ ".$r["precio"];}elseif($r["moneda"] == 2){echo "Cr ".$r["precio"];} ?><br>
                                    </div>
                                </div>
                                <div class="view-details gradient_button"><i class='fa fa-plus-circle'></i> Ver Detalles </div>
                                <div class="clearfix"></div>
                                </a>
                                <div class="view-video gradient_button" data-youtube-id="3oh7PBc33dk"><i class="fa fa-video-camera"></i> Ver Video</div>
                            </div>
</div>
</div>
                           <?php } ?>

Y este es el jquery que use

(function(){
var $tabla = $('#productos');

$('#filtro_moneda').change(function(){
    var value = $(this).val();
    if (value){
        $('div.' + value, $tabla).show();
        $('div:not(.' + value + ')', $tabla).hide();
    }
    else{
        // Se ha seleccionado All
        $('div', $tabla).show();
    }
});
})

Y aqui les dejo el option

<select name="price" class="css-dropdowns" tabindex="1" id="filtro_moneda">
                            <option value="">Metodo de Pago</option>  
   <option value="1">Dolares</option> 
<option value="2">Créditos</option> 
                        </select>

 

Buenas, tengo un catalogo de productos que hice con un while para mostrar todos los productos que tengo en la db, la cosa es que la plantilla que uso trae unos que me gustaría aprovechar para filtrar los productos, la cosa es. Buscando hice algo que medio quedo funcionando, pero al presionar cualquiera de las dos opciones en el option, solo queda el que tiene class=1.

Lo que hice fue con la misma data del while poner:

<div class="<?php echo $r["moneda"], ?>">

<?php  

while ($r = $query->fetch_array()) { ?>
    <div id="productos">
        <div class="<?php echo $r["moneda"]; ?>">
            <div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn">
                <input type="checkbox" name="a" class="checkbox compare_vehicle input-checkbox" id="vehicle_1"/>
                <label for="vehicle_1"></label>
                <a class="inventory" href="inventory-listing.html">
                    <div class="title"><?php echo $r["nombre"]; ?></div>
                    <img src="../images/productos/<?php echo $r["img"]; ?>" class="preview" alt="preview">
                    <table class="options-primary">
                        <tr>
                            <td class="option primary">Body Style:</td>
                            <td class="spec">Sport Utility Vehicle</td>
                        </tr>
                        <tr>
                            <td class="option primary">Drivetrain:</td>
                            <td class="spec">4WD</td>
                        </tr>
                        <tr>
                            <td class="option primary">Engine:</td>
                            <td class="spec">4.8L V8</td>
                        </tr>
                        <tr>
                            <td class="option primary">Transmission:</td>
                            <td class="spec">8-Speed Tiptronic</td>
                        </tr>
                        <tr>
                            <td class="option primary">Mileage:</td>
                            <td class="spec">19,585</td>
                        </tr>
                    </table>
                    <table class="options-secondary">
                        <tr>
                            <td class="option secondary">Exterior Color:</td>
                            <td class="spec">Dark Blue Metallic</td>
                        </tr>
                        <tr>
                            <td class="option secondary">Interior Color:</td>
                            <td class="spec">Black / Titanium Blue</td>
                        </tr>
                        <tr>
                            <td class="option secondary">MPG:</td>
                            <td class="spec">15 city / 21 hwy</td>
                        </tr>
                        <tr>
                            <td class="option secondary">Stock Number:</td>
                            <td class="spec">590497</td>
                        </tr>
                        <tr>
                            <td class="option secondary">VIN Number:</td>
                            <td class="spec">WP1AD29P09LA65818</td>
                        </tr>
                    </table>
                    <img src="http://demo.themesuite.com/automotive/images/carfax.png" alt="carfax" class="carfax"/>
                    <div class="price"><b>Precio:</b><br>
                        <div class="figure"><?php if ($r["moneda"] == 1) {
                                echo "$ " . $r["precio"];
                            } elseif ($r["moneda"] == 2) {
                                echo "Cr " . $r["precio"];
                            } ?><br>
                        </div>
                    </div>
                    <div class="view-details gradient_button"><i class='fa fa-plus-circle'></i> Ver Detalles</div>
                    <div class="clearfix"></div>
                </a>
                <div class="view-video gradient_button" data-youtube-id="3oh7PBc33dk"><i class="fa fa-video-camera"></i>
                    Ver Video
                </div>
            </div>
        </div>
    </div>
<?php } ?>
Y este es el jQuery que use:

(function(){
    var $tabla = $('#productos');

    $('#filtro_moneda').change(function(){
        var value = $(this).val();
        if (value){
            $('div.' + value, $tabla).show();
            $('div:not(.' + value + ')', $tabla).hide();
        }
        else{
            // Se ha seleccionado All
            $('div', $tabla).show();
        }
    });
})
Y aquí les dejo el option:

<select name="price" class="css-dropdowns" tabindex="1" id="filtro_moneda">
    <option value="">Metodo de Pago</option>
    <option value="1">Dolares</option>
    <option value="2">Créditos</option>
</select>
Origen Enlace

Hacer un filtrado con jquery y php

Buenas, tengo un catalogo de productos que hice con un while para mostrar todos los productos que tengo en la db, la cosa es que la plantilla que uso trae unos que me gustaria aprovechar para filtrar los productos, la cosa es. Buscando hice algo que medio quedo funcionando, pero al presionar cualquiera de las dos opciones en el option, solo queda el que tiene class=1.

Lo que hice fue con la misma data del while poner <div class="<?php echo $r["moneda"], ?>">

Entonces en el select si yo elijo la opcion Dolares tiene un value=1 por lo que si el campo 'moneda' de ese producto es 1 deberia quedar y los que sean 2 desaparecer. La cosa es que asi yo elija la opcion del value=1 o la del value=2 siempre aparece a cualquier cosa. No se a que se puede deber eso les dejo mi codigo

Mostrar productos

<?php
                            
                            
                            
                            while($r=$query->fetch_array()){ ?> 
                            <div id="productos">
                            <div class="<?php echo $r["moneda"]; ?>">
                            <div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn">
                                <input type="checkbox" name="a" class="checkbox compare_vehicle input-checkbox" id="vehicle_1" />
                                <label for="vehicle_1"></label>
                                <a class="inventory" href="inventory-listing.html">
                                <div class="title"><?php echo $r["nombre"]; ?></div>
                                <img src="../images/productos/<?php echo $r["img"]; ?>" class="preview" alt="preview">
                                <table class="options-primary">
                                    <tr>
                                        <td class="option primary">Body Style:</td>
                                        <td class="spec">Sport Utility Vehicle</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Drivetrain:</td>
                                        <td class="spec">4WD</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Engine:</td>
                                        <td class="spec">4.8L V8</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Transmission:</td>
                                        <td class="spec">8-Speed Tiptronic</td>
                                    </tr>
                                    <tr>
                                        <td class="option primary">Mileage:</td>
                                        <td class="spec">19,585</td>
                                    </tr>
                                </table>
                                <table class="options-secondary">
                                    <tr>
                                        <td class="option secondary">Exterior Color:</td>
                                        <td class="spec">Dark Blue Metallic</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">Interior Color:</td>
                                        <td class="spec">Black / Titanium Blue</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">MPG:</td>
                                        <td class="spec">15 city / 21 hwy</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">Stock Number:</td>
                                        <td class="spec">590497</td>
                                    </tr>
                                    <tr>
                                        <td class="option secondary">VIN Number:</td>
                                        <td class="spec">WP1AD29P09LA65818</td>
                                    </tr>
                                </table>
                                <img src="http://demo.themesuite.com/automotive/images/carfax.png" alt="carfax" class="carfax" />
                                <div class="price"><b>Precio:</b><br>
                                    <div class="figure"><?php if($r["moneda"] == 1){echo "$ ".$r["precio"];}elseif($r["moneda"] == 2){echo "Cr ".$r["precio"];} ?><br>
                                    </div>
                                </div>
                                <div class="view-details gradient_button"><i class='fa fa-plus-circle'></i> Ver Detalles </div>
                                <div class="clearfix"></div>
                                </a>
                                <div class="view-video gradient_button" data-youtube-id="3oh7PBc33dk"><i class="fa fa-video-camera"></i> Ver Video</div>
                            </div>
</div>
</div>
                           <?php } ?>

Y este es el jquery que use

(function(){
var $tabla = $('#productos');

$('#filtro_moneda').change(function(){
    var value = $(this).val();
    if (value){
        $('div.' + value, $tabla).show();
        $('div:not(.' + value + ')', $tabla).hide();
    }
    else{
        // Se ha seleccionado All
        $('div', $tabla).show();
    }
});
})

Y aqui les dejo el option

<select name="price" class="css-dropdowns" tabindex="1" id="filtro_moneda">
                            <option value="">Metodo de Pago</option>  
   <option value="1">Dolares</option> 
<option value="2">Créditos</option> 
                        </select>