1

编辑 4

好吧，我让它工作了，但这并不理想。我现在查看按钮具有哪个类并从中运行代码。如果有人能弄清楚如何使它正常工作（或至少解释为什么不能正常工作），我仍然会很感激，但我现在就让它这样做。：

$(function () {
    var post = $('ul#filtrifyContainer').find('li'),
    ft = $.filtrify("filtrifyContainer", "placeHolder"),        
    data = $(post).data(),
    genre = $(post).data("genre"),
    number = $(post).data("number");            

    var Filter = function(category){
        $(post).each(function () {
        var attribute = $(this).data(category);             
        $(this).append('<a class="button small ' + category + '">' + attribute.split(',').join('</a><a class="button small ' + category + '">') + '</a>');              

           $('a.button').click(function (e) {
               e.stopImmediatePropagation(); 
               var buttonText = $.trim($(this).text());             
               console.log(category);
               console.log(buttonText);                 
               ft.trigger({category: [buttonText]});
           });  
        });         
    };

    if($(this).hasClass('genre')){
        ft.trigger({genre: [buttonText]});
    }   
    if($(this).hasClass('number')){
        ft.trigger({number: [buttonText]});
    }           
});

这是工作小提琴：http: //jsfiddle.net/fletchling/JLN6J/13/

编辑 3

我正在使用Luis Almeda 的 Filtrify插件。我正在打印帖子中的数据属性列表，分离项目并将它们变成触发过滤器的按钮。这样，用户可以使用下拉菜单进行过滤，也可以在浏览项目时单击按钮。无需滚动到页面顶部进行过滤。我最终得到了这个代码来做到这一点：

$(function () {
    var post = $('ul#filtrifyContainer').find('li'),
    ft = $.filtrify("filtrifyContainer", "placeHolder"),        
    data = $(post).data(),
    genre = $(post).data("genre"),
    number = $(post).data("number");            

    var Filter = function(category){
        $(post).each(function () {
        var attribute = $(this).data(category);             
        $(this).append('<a class="button small ' + category + '">' + attribute.split(',').join('</a><a class="button small ' + category + '">') + '</a>');              

           $('a.button').click(function (e) {
               e.stopImmediatePropagation(); 
               var buttonText = $.trim($(this).text());             
               console.log(category);
               console.log(buttonText);                 
               ft.trigger({category: [buttonText]});
           });  
        });         
    };

    if(genre)Filter('genre')
    if(number)Filter('number')      
});

我的问题是这一行中的“类别”不接受参数，因此不过滤： ft.trigger({category: [buttonText]});

该代码确实以其他方式工作。如果我用“流派”或“数字”一词替换“类别”，它会按应有的方式过滤。它还在 console.log() 中记录了正确的单词。当我调试它时，它显示“类别”被“数字”或“流派”替换。它显然接受变量，因为它读取“buttonText”就好了。我没有得到什么？为什么它不注册那个特定的参数？我怎样才能解决这个问题？

你可以在这里查看我的问题：http: //jsfiddle.net/fletchling/JLN6J/10/

你可以在下面看到我从哪里开始以及我是如何一步步前进的：

$(function () {
    var post = $('ul#filtrifyContainer').find('li'),
    ft = $.filtrify("filtrifyContainer", "placeHolder"),        
    data = $(post).data(),
    genre = $(post).data("genre"),
    number = $(post).data("number");            

    var Filter = function(category){
        $(post).each(function () {
        var attribute = $(this).data(category);             
        $(this).append('<a class="button small ' + category + '">' + attribute.split(',').join('</a><a class="button small ' + category + '">') + '</a>');              

            $('a.button').click(function () {
                var buttonText = $(this).text();                            
                ft.trigger({category: [buttonText]});
                console.log(category);                  
            });     
        });         
    };

if(genre)Filter('genre')
if(number)Filter('number')

});

我的问题是，当我 console.log 它是什么类别时，它会同时写出“流派”和“数字”。但是，在此之前它只记录第一个。它为什么现在这样做？我相信这是唯一让它无法工作的事情，也是我的最后一个问题。

一直滚动到 javascript 面板的底部以查看我的代码。

与往常一样，非常感谢任何帮助。

编辑：

我修复了单击时拉起的重复属性：

$('a.button').click(function (e) {
    e.stopImmediatePropagation();
    var buttonText = $(this).text();                            
    ft.trigger({category: [buttonText]});
    console.log(category);                  
});

当我调试代码时，它看起来像是成功地被拉到这一行的类别中：

ft.trigger({category: [buttonText]});

编辑 2： 修正了几个愚蠢的错误。在 e.stopImmediatePropogation 之前创建了 var buttonText 并添加了修剪功能：

$('a.button').click(function (e) {
    e.stopImmediatePropagation(); 
    var buttonText = $.trim($(this).text());                
    console.log(category);
    console.log(buttonText);                
    ft.trigger({category: [buttonText]});
});
4

0 回答 0