如何简化我当前的jQuery选择

How to simplify my current jQuery Selection.

本文关键字：jQuery 选择 何简化      更新时间：2023-09-26

我有一个具有不同类名的列表项。小提琴

列表-网页 

<ul class="dropdown">
         <li class="cfl-1-1"> 0-10%</li>
         <li class="cfl-1-2"> 11-20%</li>
         <li class="cfl-1-3"> 21-40%</li>
         <li class="cfl-1-4"> 31-40%</li>
         <li class="cfl-1-5"> 41-10%</li>
 </ul>

每个列表都有不同的类名，因为如果我单击任何列表。 特定的 Div 会隐藏起来。 这是 Div

Div-HTML

<div id="cfl-1-1">0-10%</div>
<div id="cfl-1-2">11-20%</div>
<div id="cfl-1-3">21-30%</div>
<div id="cfl-1-4">31-40%</div>
<div id="cfl-1-5">41-50%</div>

我给出了独特的 iD，因此，例如，如果我单击带有 class="cfl-1-5" 的列表，id="cfl-1-5" 的 Div 将被隐藏。

这是我的jquery：

$('.cfl-1-1').click(function(){
    $("#cfl-1-1").fadeOut('slow');  
});
$('.cfl-1-2').click(function(){
    $("#cfl-1-2").fadeOut('slow');  
});
$('.cfl-1-3').click(function(){
    $("#cfl-1-3").fadeOut('slow');  
});
$('.cfl-1-4').click(function(){
    $("#cfl-1-4").fadeOut('slow');  
});
$('.cfl-1-5').click(function(){
    $("#cfl-1-5").fadeOut('slow');  
});

所以我的问题是，因为我可能需要超过 5 个列表和超过 5 个div，有什么好方法可以管理它吗？ 因为你看到我是如何完成 jquery 的，如果有一百个列表，我的 jquery 会很长：|。 这可以用任何循环(如 for 循环(来实现吗？这样它将检查增加如果类名(CFL-1-1，CFL-1-2...等(我还不擅长jquery。任何帮助将不胜感激。

试着给一个common class并做，

.HTML

<ul class="dropdown">
   <li class="cfl"> 0-10%</li>
   <li class="cfl"> 11-20%</li>
   <li class="cfl"> 21-40%</li>
   <li class="cfl"> 31-40%</li>
   <li class="cfl"> 41-10%</li>
 </ul>

.JS：

var divs = $('[id^=cfl]');
$('.cfl').click(function(){
    divs.eq($(this).index()).fadeOut('slow');  
});

演示

$('.dropdown li').click(function(){
    $("#"+$(this).attr('class')).fadeOut('slow');   
});

js小提琴示例

$('ul.dropdown').on('click', 'li', function () {
    var selector = $(this).attr('class');
    $('#' + selector).fadeOut('slow');
});

如果您绝对必须使用 ID，您的代码将使用"属性开头为"选择器进行简化。 

$( "[id^='cfl-1']" ).click(function(){
   $( this ).fadeOut( 'slow' );  
});
相关文章：