Jquery切片工作但不隐藏某些项目

Question

我有一个 Jquery 切片函数用于隐藏一些包含指南文章数据的 DIV 元素.... 我想做的是，从提取的 12 条记录开始，全部隐藏并仅显示 5 条记录 5 条记录... 它可以工作并隐藏 div 的大部分，但继续显示从 6° 记录到 12° 记录的指南文章 TITLE，我不明白为什么......

如果您在 MOBILE 版本中查看www.pcprimipassi.it，您可以看到行为...它正确显示第 5 条记录...然后显示从 6 到 12 的剩余记录的标题，我不想这是显示....全部在 ID 为“ElencoArticoli”的 DIV 上，这是我使用切片功能隐藏和显示的 div...

你能帮我理解我错在哪里吗？ 谢谢大家

我的代码：

对于 i=1 到 QuanteEstrazioni

                if not RsGuide.bof then
                %>
                
                <div id="ElencoArticoli">
                    <span data-tooltip aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="<%=RsGuide("titolo")%>">
                    <%if RsGuide("UnivocoPag")<>"" then%>
                        <a href="<%=pathlevel%>psoftware/psoftware.asp?id=<%=RsGuide("UnivocoPag")%>">
                    <%else%>
                        <a href="<%=pathlevel%>psoftware/psoftware.asp?id=<%=RsGuide("id")%>">
                    <%end if%>
                    <%=RsGuide("titolo")%>
                    </a>
                    </span>
                    <div class="panel articoli radius">
                        
                        <%if RsGuide("img")<>"" and not (isnull(RsGuide("img"))) then%>     
                            <%if i<=QuanteEstrazioni then%>
                                <%if instr(Ucase(RsGuide("Intro")),"<CENTER><IMG")=0 then%>
                                    <img src="<%=pathlevel%>images/Guide/<%=RsGuide("img")%>" ALT="<%=RsGuide("titolo")%>" />
                                <%end if%>
                            <%else%>
                                <img src="<%=pathlevel%>images/Guide/<%=RsGuide("img")%>" ALT="<%=RsGuide("titolo")%>" />
                            <%end if%>
                        <%else%>
                            <img src="<%=pathlevel%>images/ICONAgenericaGuide.gif" ALT="Articolo in rilievo" />
                        <%end if%>
                        
                        <%=RsGuide("Intro")%>
                        
                         
                    
                    </div>
                    <hr>
                </div>
                
                    <%if not RsGuide.bof then
                        RsGuide.Movenext
                    end if
                end if
        
            next
        else%>
            <div class="panel articoli radius">
            <%=txtNessunRecord%> <%=txtPerLaSezione%> <%=txtGUIDE%>
            </div>          
        <%end if%>
                
        <div class="row collapse">  
            <div class="small-12 columns text-center">
                <div id="loadMore" class="button success radius" style="display:none;">Mostra altri articoli</div>
            </div>
        </div>
        
        
        
        <script>
        $(document).ready(function () {
            var x;
            var inc;
            var max;
            
            x=5;
            inc=5;
            max= $('#ElencoArticoli div').length;
            
            //$('#loadMore').hide();
            //alert(max);
            
            if($("#costolehead").is(":hidden")){
                $('#ElencoArticoli div').hide();
                $('#ElencoArticoli div').slice(0, x).show();
                //$('#ElencoArticoli div').slice(x+1, max).hide();
                
                
                if (max>x){
                $('#loadMore').show();
                } else {
                $('#loadMore').hide();
                }
                
                $('#loadMore').on('click', function (e) {
                e.preventDefault();
                x = x+inc;
                $('#ElencoArticoli div').slice(0, x).slideDown();
                if (x>=max){
                $('#loadMore').hide();
                }
                });
            }
           
        });
        </script>

Answer 1

一篇文章是：

<div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Violazione di un account online; come accorgersene, come prevenirlo e cosa fare per rimediare">

      <a href="psoftware/psoftware.asp?id=VIOLAZIONEACCOUNT">
        Violazione di un account online; come accorgersene, come prevenirlo e cosa fare per rimediare
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbViolazioneAccount.png" border="" width="400" alt="Violazione di un account online; come accorgersene, come prevenirlo e cosa fare per rimediare"></center><br>La violazione del tuo account è un problema di sicurezza serio che può comportare spiacevoli conseguenze sulla tua vita reale; vediamo insieme come accorgersene e come rimediare in caso di confermata violazione

    </div>
    <hr>
  </div>

所以当你执行命令时：$('#ElencoArticoli div').hide();

你只隐藏这部分：

<div class="panel articoli radius">

  <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbViolazioneAccount.png" border="" width="400" alt="Violazione di un account online; come accorgersene, come prevenirlo e cosa fare per rimediare"></center><br>La violazione del tuo account è un problema di sicurezza serio che può comportare spiacevoli conseguenze sulla tua vita reale; vediamo insieme come accorgersene e come rimediare in caso di confermata violazione

</div>

所以所有 span 标签和 hr 标签都显示出来了（标题）

无需修改逻辑并且如果每篇文章的结构相同（1 个跨度，1 个 div 1 小时），快速修复：

  $('#ElencoArticoli div').hide();
  $('#ElencoArticoli span').hide();
  $('#ElencoArticoli hr').hide(); 

  $('#ElencoArticoli div').slice(0, x).show();
  $('#ElencoArticoli span').slice(0, x).show();
  $('#ElencoArticoli hr').slice(0, x).show();

另一个问题我看到所有文章都有相同的 ID ElencoArticoli，所以它不是 html 规则，即使一切看起来都很好，你可能会遇到不可预知的问题

我建议你在构建html页面时生成不同的id或者更好的添加fake class。

例如，如果你有 fake 类而不是 id ElencoArticoli，你可以这样写：

  var x;
  var inc;
  var max;

  x = 5; inc = 5;     
  max = $('.fake').length;
 console.log(max);

  $('.fake').children().hide();
  $('.fake').slice(0, x).children().show();

sn-p 只正确显示五篇文章：

$(document).ready(function() {
       //add class dynamically, 
       //you cant do $('#ElencoArticoli').addClass("fake") because it stops at the first id
      $('[id=ElencoArticoli').addClass("fake");
      var x;
      var inc;
      var max;

      x = 5;
      inc = 5;
      max = $('.fake').length;
      console.log(max);

      $('.fake').children().hide();
      $('.fake').slice(0, x).children().show();

      //$('#ElencoArticoli div').slice(x+1, max).hide();


      if (max > x) {
        $('#loadMore').show();
      } else {
        $('#loadMore').hide();
      }

      $('#loadMore').on('click', function(e) {
        e.preventDefault();
        x = x + inc;
        $('#ElencoArticoli div').slice(0, x).slideDown();
        if (x >= max) {
          $('#loadMore').hide();
        }
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="small-12 medium-7 large-7 columns">

  <div class="panel testate radius">.Ultimi Articoli e Guide passo passo</div>


  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Violazione di un account online; come accorgersene, come prevenirlo e cosa fare per rimediare">

      <a href="psoftware/psoftware.asp?id=VIOLAZIONEACCOUNT">
        Violazione di un account online; come accorgersene, come prevenirlo e cosa fare per rimediare
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbViolazioneAccount.png" border="" width="400" alt="Violazione di un account online; come accorgersene, come prevenirlo e cosa fare per rimediare"></center><br>La violazione del tuo account è un problema di sicurezza serio che può comportare spiacevoli conseguenze sulla tua vita reale; vediamo insieme come accorgersene e come rimediare in caso di confermata violazione



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Come scegliere la migliore stampante per uso domestico">

      <a href="psoftware/psoftware.asp?id=SCELTASTAMPANTE">
        Come scegliere la migliore stampante per uso domestico
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbScegliereStampante.png" border="" width="400" alt="Come scegliere la migliore stampante per uso domestico"></center><br>La stampante è da tempo un oggetto indispensabile della nostra casa; in questa guida faremo un pò di chiarezza sui tantissimi tipi di stampanti esistenti in modo che tu possa scegliere quella più vicina ai tuoi bisogni senza spendere un capitale.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Come disabilitare o riconfigurare gli aggiornamenti automatici di Windows 10">

      <a href="psoftware/psoftware.asp?id=399">
        Come disabilitare o riconfigurare gli aggiornamenti automatici di Windows 10
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbWindows10Update.png" border="" width="400" alt="Come disabilitare o riconfigurare gli aggiornamenti automatici di Windows 10"></center><br>Gli aggiornamenti automatici di windows 10 partono da se per impostazione predefinita, provocando non poco disappunto nella maggior parte degli utenti; vediamo come disabilitarli o ri-configurarli
      a nostro piacimento.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Come scegliere il miglior monitor per il computer">

      <a href="psoftware/psoftware.asp?id=SCELTAMONITOR">
        Come scegliere il miglior monitor per il computer
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbSceltaMonitor.png" border="" width="400" alt="Come scegliere il miglior monitor per il computer"></center><br>Il monitor è uno dei componenti più importanti di una postazione computer in quanto lo sfrutterai per molto tempo ed è responsabile dell'affaticamento dei tuoi occhi; ecco come scegliere quello migliore per le tue esigenze.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Come installare una nuova stampante">

      <a href="psoftware/psoftware.asp?id=INSTALLARESTAMPANTE">
        Come installare una nuova stampante
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbInstallareStampante.png" border="" width="400" alt="Come installare una nuova stampante"></center><br>L'installazione di una nuova stampante può fare paura ma è una operazione veloce e spesso automatica che necessita di pochi minuti.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="I migliori servizi cloud gratuiti per salvare i tuoi dati">

      <a href="psoftware/psoftware.asp?id=389">
        I migliori servizi cloud gratuiti per salvare i tuoi dati
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbCloudGratuiti.png" border="" width="400" alt="I migliori servizi cloud gratuiti per salvare i tuoi dati"></center><br>Un elenco dei migliori servizi cloud gratuiti da utilizzare liberamente per il salvataggio dei propri dati foto e video in modo sicuro veloce e pratico.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="I migliori softwares gratuiti per elaborare immagini e foto">

      <a href="psoftware/psoftware.asp?id=softwaregrafica">
        I migliori softwares gratuiti per elaborare immagini e foto
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbSoftwaresElaborazioneGrafica.png" border="" width="400" alt="I migliori softwares gratuiti per elaborare immagini e foto"></center><br>Una presentazione dei migliori softwares free o open source da scaricare e utilizzare liberamente per l'elaborazione di foto e immagini che non hanno niente da invidiare ai prodotti commerciali e con i quali potrai dare libero sfogo alla tua creatività.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Come salvare documenti in formato universale con LibreOffice e OpenOffice">

      <a href="psoftware/psoftware.asp?id=384">
        Come salvare documenti in formato universale con LibreOffice e OpenOffice
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbDocumentiUniversali.png" border="" width="400" alt="Come salvare documenti in formato universale con LibreOffice e OpenOffice"></center><br>Impostiamo le suite da ufficio open source in modo da salvare i documenti in un formato universalmente compatibile e riconosciuto.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Come sostituire la scheda wifi di un notebook">

      <a href="psoftware/psoftware.asp?id=383">
        Come sostituire la scheda wifi di un notebook
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbSchedaWifiNotebook.png" border="" width="400" alt="Come sostituire la scheda wifi di un notebook"></center><br>Vediamo insieme i passaggi per individuare e sostituire la scheda wifi/wireless di un notebook o per aggiungerne una esterna.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Come dare nuova vita ad un vecchio computer">

      <a href="psoftware/psoftware.asp?id=NuovaVitaVecchioPC">
        Come dare nuova vita ad un vecchio computer
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbNuovaVitaVecchioComputer.png" border="" width="400" alt="Come dare nuova vita ad un vecchio computer"></center><br>Hai un vecchio computer da rimettere in sesto perchè diventato troppo lento e quindi vuoi velocizzarlo ? Puoi farlo con una spesa minima, basta sapere cosa fare.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Differenze tra le varie licenze softwares in commercio">

      <a href="psoftware/psoftware.asp?id=380">
        Differenze tra le varie licenze softwares in commercio
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbLicenzeSoftwares.png" border="" width="400" alt="Differenze tra le varie licenze softwares in commercio"></center><br>Capire la differenza tra i vari tipi di licenze commerciali disponibili per un software è importante per poter scegliere quella che più si adatta alle tue esigenze: vediamo insieme di capire quali sono e a cosa danno diritto.



    </div>
    <hr>
  </div>



  <div id="ElencoArticoli">
    <span data-tooltip="" aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip" title="Passiamo da un PC ad un Mini PC">

      <a href="psoftware/psoftware.asp?id=MiniPc">
        Passiamo da un PC ad un Mini PC
      </a>
    </span>
    <div class="panel articoli radius">

      <center><img src="https://www.pcprimipassi.it/images/fotolezioni/ThumbMiniPc.png" border="" width="400" alt="Passiamo da un PC ad un Mini PC"></center><br>Forse non sai che esistono computers cosi piccoli da essere poco più grandi della tua mano e che puoi utilizzarli sul tuo televisore e portarli dove vuoi con notevoli vantaggi: basso costo, scarsissimo consumo energetico, zero rumore, portabilità incredibile.




    </div>
    <hr>
  </div>



  <div class="row collapse">
    <div class="small-12 columns text-center">
      <div id="loadMore" class="button success radius" style="display:none;">Mostra altri articoli</div>
    </div>
  </div>



  <script>
    $(document).ready(function() {
      var x;
      var inc;
      var max;

      x = 5;
      inc = 5;
      max = $('#ElencoArticoli div').length;

      //$('#loadMore').hide();
      //alert(max);

      if ($("#costolehead").is(":hidden")) {
        $('#ElencoArticoli div').hide();
        $('#ElencoArticoli div').slice(0, x).show();
        //$('#ElencoArticoli div').slice(x+1, max).hide();


        if (max > x) {
          $('#loadMore').show();
        } else {
          $('#loadMore').hide();
        }

        $('#loadMore').on('click', function(e) {
          e.preventDefault();
          x = x + inc;
          $('#ElencoArticoli div').slice(0, x).slideDown();
          if (x >= max) {
            $('#loadMore').hide();
          }
        });
      }

    });

  </script>



  <div id="AltriArticoli" class="panel dalforum radius center">
    <a href="psoftware/PsoftwareSez.asp">* VEDI ALTRE GUIDE *</a>
  </div>
</div>

因此，总而言之，您掌握了所有错误信息

Answer 2

我使用添加了类和子对象的您的解决方案....它工作得很好，谢谢谢谢谢谢Frenchy !!!!