Question

我真的很喜欢这个帮助...我正在为投资组合项目构建一个过滤器。

我有四个链接，每个链接有一个类名，与文本相同。所有投资组合项目都列在其中。每个项目组合项都在一个div中，有两个类 - .listItem和一个链接类。

示例：<a class="Architecture" href="#">

我想点击动画的div是：<div class="listItem Architecture">

这是我的脚本，不起作用......

$(document).ready(function(){

    var filterTrig = $('#sortPort a').attr('class');

    $('#sortPort a').click(function() {
        $('.listItem').each(function(){
            if ($(this).is(filterTrig)){
                $(this).hide();
            }
        });

        return false;
    });
});

Answer 1

is()选择了一个选择器。您正在使用班级名称，因此您可以改为使用hasClass()：

$(document).ready(function() {
    $("#sortPort a").click(function() {
        var filterTrig = $(this).attr("class");
        $(".listItem").each(function() {
            if ($(this).hasClass(filterTrig)) {
                $(this).hide();
            }
        });
    });
});

您还可以在类名前加一个句点字符（.），以便将其转换为类选择器，但如果anchor元素公开多个类，则无效。

Answer 2

谢谢！我更多地使用代码并提出了不同的解决方案。它可能是巨大而丑陋的书写，但该剧本现在有效。

包括所有效果，就像这样（见1979design.se/portfolio）：

var listItem = $('.listItem')
        var sp = 'currentSortPort'  
       $('#sortPort a.filter').bind(
          'click' , function(a) {
              var trigger = $(this).html();
              var portType = '.listItem'+'.'+trigger;
                  $('h3').removeClass(sp);
                  $(a.target).parent().addClass(sp);

              $(listItem).each( function() {
                   $(this).fadeTo('fast', 1);
                  $(portType).addClass('selected');
                  $(this).not('.selected').fadeTo('medium', 0.1);
              });  
              $('.listItem').removeClass('selected');             
         return false;
     });
     $('a.reset').click(function(b){
          $('h3').removeClass(sp);
          $(b.target).parent().addClass(sp);
          $(listItem).fadeTo('fast', 1);
          return false;
     });

再次感谢！没错，jQuery并非不可能;）只有在新手完成时才会编写大量脚本

在if语句中将href-class与div-class匹配

2 个答案: