Question

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

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

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

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's所以例如，如果我点击带有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的，如果有100个列表我的jquery将会很长：|。这是否可以使用任何循环，如for循环？所以它会检查增加的类名（cfl-1-1，cfl-1-2 ......等）我对jquery还不好。任何帮助将不胜感激。

Answer 1

尝试提供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');  
});

DEMO

Answer 2

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

<强> jsFiddle example

Answer 3

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

Answer 4

如果您必须使用ID，则可以使用'Attribute Starts With ' Selector简化您的代码。

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

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

4 个答案:

DEMO