提问人：Stefano Ravagni 提问时间：3/11/2021 更新时间：3/11/2021 访问量：86
Jquery 切片工作，但不隐藏某些项目
Jquery slice work but not hide somes item
问：
我有一个 Jquery 切片函数，用于隐藏一些包含指南文章数据的 DIV 元素...... 我要做的是，从提取的 12 条记录开始，全部隐藏并仅显示 5 条记录 5 条记录...... 它可以工作并隐藏 div 的大部分内容，但继续显示从 6° 记录到 12° 记录的指南文章标题，我不明白为什么......
如果你在MOBILE版本中查看 www.pcprimipassi.it，你可以看到这种行为......它正确显示 FIRS 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>
答：
0赞
Frenchy
3/11/2021
#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 个分区 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 ，所以它不是 html 规则，即使一切看起来都很好，你也可能会遇到不可预测的问题ElencoArticoli
我建议您在构建 HTML 页面时生成不同的 ID 或更好地添加假类。
例如，如果你有 class 而不是 id ，你可以这样写：fakeElencoArticoli
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();
该代码段仅正确显示五篇文章：
$(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>因此，总而言之，您拥有为什么会出现错误的所有信息
评论
0赞
Stefano Ravagni
3/11/2021
0 我使用您的解决方案并添加了类和子对象......它工作得很好，谢谢Frenchy !!!
0赞
Stefano Ravagni
3/11/2021
#2
我使用您的解决方案并添加了类和子对象......它工作得很好，谢谢Frenchy !!!
评论