用if语句中的div-class匹配ref-class

Question

我真的需要一些帮助…我正在为投资组合项目构建一个过滤框。

我有四个链接，每个链接都有一个类名，与它们的文本相同。此外还列出了所有投资组合项目。每个投资组合项目都在一个div中，其中包含两个类- . listitem和其中一个links类。

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

我想在a-click上创建动画的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();
            }
        });
    });
});

你也可以在类名前加上一个句点字符(.)，以便把它变成一个类选择器，但如果锚元素暴露了多个类，那就行不通了。

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不是不可能的。只有由新手编写的大型脚本