Filtrar contenido usando casillas de verificación y JQuery

Tengo problemas para hacer que este código funcione:

    $(function(){
        $('div.tags').delegate('input:checkbox', 'change', function() {
            var $lis = $('.results > li').hide();
            //For each one checked
            $('input:checked').each(function() {
                    $lis.filter('.' + $(this).attr('rel')).show();
            });
        });
    });

Con HTML como:

      <div class="tags">
        <label><input type="checkbox" rel="arts" /> Arts </label>
        <label><input type="checkbox" rel="computers" /> Computers </label>
        <label><input type="checkbox" rel="health" /> Health </label>
        <label><input type="checkbox" rel="video-games" /> Video Games </label>
      </div>
      <ul class="results">
         <li class="arts computers">Result 1</li>
         <li class="video-games">Result 2</li>
         <li class="computers health video-games">Result 3</li>
         <li class="arts video-games">Result 4</li>
      </ul>

Lo probé en IE, FF y Opera, pero no obtengo los resultados esperados. Es decir, ¿el contenido no se filtra al hacer clic en una casilla de verificación? Estoy tratando de replicar algo similar a esto:

http://www.houseoffraser.co.uk/Jeans+for+Women/302,default,sc.html

Observe el efecto de acordeón en la barra lateral izquierda de la página. No estoy demasiado preocupado por el acordeón en sí, es la función de casillas de verificación en la que me estoy enfocando en este momento. En la carga de la página, todos los resultados de la consulta (alrededor de 1300) se muestran al usuario.

Luego, un usuario puede filtrar o refinar los resultados haciendo clic en las casillas de verificación. Supongo que se trata de algún tipo de secuencia de comandos Jquery/Ajax, pero no estoy del todo seguro. ¿Estoy en el camino correcto?

Gracias de antemano.

preguntado el 22 de mayo de 12 a las 13:05

¿Esto no funciona como está? jsfiddle.net/X3aTz -

Hola, sí, funciona en jsfiddle, pero no en mi host local por alguna razón. Muy extraño.. -

Verifique su consola de desarrollador para ver si hay errores. Verifique que sus scripts (tanto jQuery como el código de su aplicación) se resuelvan en el archivo correcto y no sean 404 -

como de 1.7 delegate es reemplazado por on... ¿cuál es la versión de jQuery que está probando en su entorno local? ¿Ha comprobado si tiene algún error al depurar el código? -

@optimusprime619: (buen nombre por cierto) Aunque on() ha reemplazado delegate(), delegate() todavía existe y funcionará bien. -

3 Respuestas

Mencionaste en un comentario que estás usando jQuery 1.3

jQuery's delegate() Método se introdujo en 1.4.2, por lo que no estará disponible. Tendrá que usar una versión posterior de jQuery (¿algún motivo por el que esté usando una versión tan antigua?).

Si abre su consola de desarrollador (acceso directo F12 en Chrome), debería ver un error que dice que TypeError: Object [object Object] has no method 'delegate'

Si necesitas para usar jQuery 1.3, intente:

$(function() {
    $('div.tags').bind('change', function(e) {
        var that = e.originalEvent.target;

        if ($(that).is('input:checkbox')) {
            var $lis = $('.results > li ').hide();
            //For each one checked
            $('input:checked ').each(function() {
                $lis.filter('.' + $(that).attr('rel')).show();
            });
        }
    });
});

que puedes ver trabajando aquí

contestado el 23 de mayo de 17 a las 13:05

$(document).ready(function () {
            $('.results > li').hide();

            $('div.tags').find('input:checkbox').live('click', function () {
                $('.results > li').hide();
                $('div.tags').find('input:checked').each(function () {
                    $('.results > li.' + $(this).attr('rel')).show();
                });
            });
        });      ​

para una demostración en vivo, vea este enlace: http://jsfiddle.net/nanoquantumtech/Ddnuh/

contestado el 22 de mayo de 12 a las 14:05

@Matt, gracias, estaba usando la versión incorrecta de jquery, funciona con http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js. Gracias de nuevo, y disculpas por mi mal formato. Volviendo a mi pregunta original. ¿Voy en la dirección correcta tratando de imitar el efecto del sitio de la casa de Fraser? - galleta

@AndrewCookson: No veo por qué no. Si empiezas a tener muchos elementos dentro del <ul class="results"/>, el siguiente paso sería recuperar la lista de AJAX a pedido en lugar de incluir todo el contenido desde el inicio de la página. hay $('.results').load() para eso. - Matt

Prueba esto una vez

 $(function(){
        $('div.tags').delegate('input:checkbox', 'change', function() {
            var $lis = $('.results > li').hide();
            //For each one checked
            $('input[type="checked"]:checked').each(function() {
                    $lis.filter('.' + $(this).attr('rel')).show();
            });
        });
    });

contestado el 22 de mayo de 12 a las 13:05

[type="checked"]?... sin mencionar que sus cotizaciones no coinciden. - Matt

hola ejecuto la consola y: falta) después de la condición { checkbox.html (línea 39, col 6) $("div.tags").delegate no es una función $('div.tags').delegate('input: casilla de verificación', 'cambiar', función () { - galleta

@Matt, mis scripts están en línea, por lo que no debería ser un problema con 404... formatear el código aquí por primera vez es una lucha :) - galleta

@AndrewCookson: Mira mi respuesta - Matt

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.