Question

我有一个小脚本隐藏了某个特定类的基础，它类似于投资组合的过滤器。

这是我的js脚本：

$(document).ready(function() {
    $('ul#filter a').click(function() {
        $(this).css('outline','none');
        $('ul#filter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','-');

        if(filterVal == 'tutti') {
            $('ul#elencoProdotti li.hidden').fadeIn('slow').removeClass('hidden');
        } else {
            $('ul#elencoProdotti li').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut(500, function(){
                        $(this).addClass('hidden');
                    });
                } else {
                    $(this).fadeIn(500, function(){
                      $(this).removeClass('hidden')
                    });
                }
            });         
        }         
        return false;
    });
});

这是我的代码：

<ul class="hidden-xs" id="filter">
    <li class=""><a href="#">Tutti</a></li>
            <li class="current"><a href="">Tasche risparmio energetico</a></li>
            <li><a href="">Smart Card</a></li>
            <li><a href="">Serrature elettroniche</a></li>
            <li><a href="">Controllo Temperatura</a></li>
            <li><a href="">Cilindri</a></li>
    </ul>
<ul id="elencoProdotti">
<li class="tutti cilindri" style="display: list-item;">
                <div class="row row-prodotti">
                    <div class="col-md-4"><img class="img-responsive center-block" alt="Cilindro Elettronico" src="/tecnos-security/files/large/7fdce155b3dfab5f750eb1b684100452.jpg"></div>
                    <div class="col-md-5 testo_intro">
                        <h2><a href="/tecnos-security/prodotti/dettagli/cilindro-elettronico">Cilindro Elettronico</a></h2>
                        <p>Il cilindro elettronico può essere facilmente installato al posto di qualsiasi cilindro meccanico&nbsp;rappresentando la soluzione piu’ semplice ed economica per sostituire su qualsiasi porta&nbsp;esistente le tradizionali chiavi meccaniche con tessere Rfid (Trasponder).</p>
                        <span class="leggi">
                            <a href="tecnos-security/prodotti/dettagli/cilindro-elettronico">scheda tecnica &gt;&gt;</a>
                        </span>
                    </div>
                    <div class="col-md-3">
                        <div class="row">
                                                        <div class="col-md-3">
                                <a href="/tecnos-security/files/download/125deff1f25a6e9" style="border: none;">
                                    <img src="tecnos-security/addons/shared_addons/themes/tecnos/img/multilingua/pdf.png" alt="multilingua/pdf.png" class="img-responsive">
                                </a>
                            </div>
                            <div class="col-md-6">
                                <div style="font-weight: bold;">Depliant</div>
                                <div style="font-weight: bold;">
                                    <a href="tecnos-security/files/download/125deff1f25a6e9">Download File</a>
                                </div>
                            </div>
                                                    </div>                  
                    </div>
                </div>
            </li>
<li class="tutti smart-card">
                <div class="row row-prodotti">
                    <div class="col-md-4"><img class="img-responsive center-block" alt="Tessera Smart Card di prossimità MIFare Philips" src="files/large/231eb169b9edc8ecab8a6b82c1006e1a.png"></div>
                    <div class="col-md-5 testo_intro">
                        <h2><a href="tecnos-security/prodotti/dettagli/tessera-smart-card-di-prossimita-mifare-philips">Tessera Smart Card di prossimità MIFare Philips</a></h2>
                        <ul>
 <li style="display: list-item;" class="">Codice identificativo selezionato in modo casuale fra oltre 4 miliardi di combinazioni</li>
 <li style="display: list-item;" class="">Leggibile e riscrivibile fino a 100.000 volte</li>
 <li style="display: list-item;" class="">Personalizzazione tessere con logo, immagini, etc.</li>
</ul>
                        <span class="leggi">
                            <a href="/tecnos-security/prodotti/dettagli/tessera-smart-card-di-prossimita-mifare-philips">scheda tecnica &gt;&gt;</a>
                        </span>
                    </div>
                    <div class="col-md-3">
                        <div class="row">
                                                    </div>                  
                    </div>
                </div>
            </li>
</ul>

该脚本运行良好，但在列表中发生了一些我想要显示的<li>个元素，例如在testo_intro类中。如何在该课程中显示<li>？

编辑：

此处演示：http://jsfiddle.net/A2QtM/2

解决：

我在最后else部分后使用了此代码：

if( $('div.row-prodotti div.testo_intro').is(':visible') )
{
    $('div.testo_intro li').show().removeClass('hidden');
}

Answer 1

在li中显示.testo_intro：

 $('.testo_intro li').show()

Answer 2

尝试将$（＆＃34; .testo_intro li＆＃34;）。show（）放在每个之外，例如：

  $(document).ready(function() {
$('ul#filter a').click(function() {
    $(this).css('outline','none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'tutti') {
        $('ul#elencoProdotti li.hidden').fadeIn('slow').removeClass('hidden');
    } else {
        $('ul#elencoProdotti li').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut(500, function(){
                    $(this).addClass('hidden');
                });
            } else {
                $(this).fadeIn(500, function(){
                  $(this).removeClass('hidden')
                });
            }
        });   
        if( $('.testo_intro').is(':visible'))//this should be outside from each function
            $('.testo_intro li').show();      
    }         
    return false;
   });
  });

jquery - 在ul中显示元素

2 个答案: