3

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"], ?>">

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

3 respuestas 3

3

El problema es muy sencillo de resolver y está en el JavaScript: le falta el símbolo del dólar ($) al principio. En jQuery para que algo se ejecuta al cargarse la página puedes hacer $(document).ready(function() { ... }) o $(function() { ... }). En tu caso parece que optaste por la segunda opción pero te falta completar el código con el $:

$(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();
        }
    });
})

Una vez hagas eso, el código ya funciona sin problemas. Puedes verlo en este ejemplo:

$(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();
        }
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

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

<div id="productos">
  <div class="1">Uno</div>
  <div class="2">Dos</div>
  <div class="1">one</div>
  <div class="2">two</div>
  <div class="1">Un</div>
</div>

6
  • 2
    +1 O también podría ser: (function () { })(); :) Commented el 24 oct. 2016 a las 0:51
  • @aldanux correcto. De hecho, pensé en ponerlo así, pero ese método no funcionaría si el código se ejecuta antes de la carga de los elementos (por ejemplo en el head) y no sabía dónde tiene OP el código, por eso opté por ponerlo de esta manera que funcionará en ambos casos.
    – Alvaro Montoro
    Commented el 24 oct. 2016 a las 1:06
  • Totalmente de acuerdo... ademas lo dudo que sea IIFE Commented el 24 oct. 2016 a las 1:11
  • Sigue sin funcionar, creo que el problema es que estoy colocando mal los divs dentro del while Commented el 24 oct. 2016 a las 18:27
  • @SantiagoD'Antuoni Eso no debería influir. ¿Puedes compartir el código generado en lugar del PHP?
    – Alvaro Montoro
    Commented el 24 oct. 2016 a las 18:31
0

Probá así:

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

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

Te recomendaría abrir la consola (Ctrl+Mayus+i) y fijarse si arroja algún error. La mayoría de los errores se da por errarle en el tipeo de los selectores

2
  • Este código puede realizar efectos no deseados. La manera en que OP realiza la selección se limita al contenido del elemento #productos, pero con este código, todos los div del documento se verán afectados incluso si están fuera de #productos.
    – Alvaro Montoro
    Commented el 24 oct. 2016 a las 1:15
  • Tenes razón, tendría que haber aclarado. Espero que a Santiago le haya quedado claro el uso de los selectores
    – Genarito
    Commented el 24 oct. 2016 a las 1:59
0

Esto es lo que me devuelve el PHP en HTML

                             
                            <div id="productos">
                            <div class="0">
                            <div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn animated" style="visibility: visible; animation-name: 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">Police Car</div>
                                <img src="../images/productos/ThumbFinal_4.9.15.png" class="preview" alt="preview">
                                <table class="options-primary">
                                    <tbody><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>
                                </tbody></table>
                                <table class="options-secondary">
                                    <tbody><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>
                                </tbody></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"><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>
                            
                            <div id="productos">
                            <div class="2">
                            <div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn animated" style="visibility: visible; animation-name: 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">Bullet</div>
                                <img src="../images/productos/50777-1344439068-gta-sa2012-08-0818-15-34-89.jpg" class="preview" alt="preview">
                                <table class="options-primary">
                                    <tbody><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>
                                </tbody></table>
                                <table class="options-secondary">
                                    <tbody><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>
                                </tbody></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">Cr 160000<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>
                            
                            <div id="productos">
                            <div class="1">
                            <div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn" style="visibility: hidden; animation-name: none;">
                                <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">Infernus</div>
                                <img src="../images/productos/7sALOSB.png" class="preview" alt="preview">
                                <table class="options-primary">
                                    <tbody><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>
                                </tbody></table>
                                <table class="options-secondary">
                                    <tbody><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>
                                </tbody></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">$ 45<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>
                            
                            <div id="productos">
                            <div class="2">
                            <div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn" style="visibility: hidden; animation-name: none;">
                                <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">Bullet Full</div>
                                <img src="../images/productos/50777-1344439068-gta-sa2012-08-0818-15-34-89.jpg" class="preview" alt="preview">
                                <table class="options-primary">
                                    <tbody><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>
                                </tbody></table>
                                <table class="options-secondary">
                                    <tbody><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>
                                </tbody></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">Cr 30<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>
                                                               
                                 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.