Javascript 如何简化当前的jQuery选择。

我有一个不同类名的列表项

列出HTML

<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>

所以我的问题是，我可能需要5个以上的列表和5个以上的div，有什么好办法来管理这个吗？因为您可以看到我是如何完成jquery的，如果有一百个列表，我的jquery将非常长：|。

---

这是否可能与任何类似for-loop的循环一起实现？因此，如果类名（cfl-1-1、cfl-1-2…等）我还不擅长jquery，它将检查增加的情况。任何帮助都将不胜感激。

尝试提供一个

公共类

，然后

HTML

---

如果您必须使用ID，那么您的代码将通过使用简化

---

这个问题似乎是离题的，因为它属于这个问题。这是一个很好的建议，但是我也建议在目标div中放弃使用id值，而在目标div中也使用公共类。感谢易于理解的解决方案：）接受@雷汉很乐意帮忙。！我不喜欢这个解决方案，因为如果他稍后添加一个类，它将不起作用。@Karl AndréGagnon-为什么不起作用？他说他给列表项添加了与div id匹配的类。比如说，他添加了一个类，如

red

（我不知道为什么，就这么说吧），你的选择器应该是：

“#cfl-1-3 red”

@j08691我也理解你的观点，但我在我的陈述中假设了两件事。1） 用户可能已经发布了一个伪代码来显示问题（可能他正在使用引导，但没有必要显示他的引导类）。2） 有类似问题的未来用户可能有课程。但无论如何，我只是说我不喜欢这个解决方案，并解释了原因，但没有否决，因为它适用于当前代码。我不想就OP的现状展开辩论。谢谢你的简单而完美的回答，但是是的。在我的原始代码中还有其他类。

<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>

$('.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');  
});

<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>

var divs = $('[id^=cfl]');

$('.cfl').click(function(){
    divs.eq($(this).index()).fadeOut('slow');  
});

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

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

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