css属性工作按钮点击但不是$ .each内

Question

我有以下代码。

以下代码在点击时效果不错，但不在$ .each内。为什么？

$($('.slides').children()[0]).css({'opacity':1,'z-index':6}); 

$(document).ready(function(){ 
 

 
$(document).on('click', '.one', function() { 
 
$('.slides').children().css({'opacity':0,'z-index':0}); 
 
       $($('.slides').children()[0]).css({'opacity':1,'z-index':6}); 
 
}); 
 

 
$(document).on('click', '.two', function() { 
 
$('.slides').children().css({'opacity':0,'z-index':0}); 
 
       $($('.slides').children()[1]).css({'opacity':1,'z-index':6}); 
 
}); 
 

 
$(document).on('click', '.three', function() { 
 
$('.slides').children().css({'opacity':0,'z-index':0}); 
 
       $($('.slides').children()[2]).css({'opacity':1,'z-index':6}); 
 
}); 
 

 
$(document).on('click', '.left-btn', function() { 
 
     var i = 0; 
 

 
     $.each($('.slides > li'),function(e,v){ 
 
      if($(v).css('opacity')>0){ 
 
       $('.slides').children().css({'opacity':0,'z-index':0}); 
 
       $($('.slides').children()[i]).css({'opacity':1,'z-index':6}); 
 
       
 
       console.log("SSSSSSSSSSS"+i); 
 
      } 
 
      i++; 
 
     }); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn left-btn"> 
 
left 
 
</button> 
 

 
<button class="btn one"> 
 
one 
 
</button> 
 
<button class="btn two"> 
 
two 
 
</button> 
 
<button class="btn three"> 
 
three 
 
</button> 
 
<ul class="slides"> 
 
    <li>first</li> 
 
    <li>second</li> 
 
    <li>third</li> 
 
    <li>fourth</li> 
 
</ul> 
 
        

Answer 1

您可以左键代码更改到以下。当您点击left按钮时，会显示之前的li元素。我写了if语句来检查当前的li是否是第一个元素，如果是的话我就不做任何事情。

$(document).on('click', '.left-btn', function() { 
    $.each($('.slides > li'), function (e, v) { 
     if ($(v).css('opacity') > 0) { 
      if ($(v).index() != 0) { 
       $('.slides').children().css({ 'opacity': 0, 'z-index': 0 }); 
       //$(v).prev().css({ 'opacity': 1, 'z-index': 6 }); 
       $($('.slides').children()[e-1]).css({'opacity':1,'z-index':6}); 
      } 
     } 
    }); 
}); 

$(document).on('click', '.right-btn', function() { 
    var flag = false; 
    $.each($('.slides > li'), function (e, v) { 
     if ($(v).css('opacity') > 0) { 
      if ($(v).index() != $('.slides > li').length - 1 && !flag) { 
       $('.slides').children().css({ 'opacity': 0, 'z-index': 0 }); 
       $($('.slides').children()[e + 1]).css({ 'opacity': 1, 'z-index': 6 }); 
       //$(v).next().css({ 'opacity': 1, 'z-index': 6 }); 
       flag = true; 
      } 
     } 
    }); 
}); 

$(document).on('click', '.one', function() { 
 
\t $('.slides').children().css({ 'opacity': 0, 'z-index': 0 }); 
 
\t $($('.slides').children()[0]).css({ 'opacity': 1, 'z-index': 6 }); 
 
}); 
 

 
$(document).on('click', '.two', function() { 
 
\t $('.slides').children().css({ 'opacity': 0, 'z-index': 0 }); 
 
\t $($('.slides').children()[1]).css({ 'opacity': 1, 'z-index': 6 }); 
 
}); 
 

 
$(document).on('click', '.three', function() { 
 
\t $('.slides').children().css({ 'opacity': 0, 'z-index': 0 }); 
 
\t $($('.slides').children()[2]).css({ 'opacity': 1, 'z-index': 6 }); 
 
}); 
 

 
$(document).on('click', '.left-btn', function() { 
 
\t $.each($('.slides > li'), function (e, v) { 
 
\t \t if ($(v).css('opacity') > 0) { 
 
\t \t \t if ($(v).index() != 0) { 
 
\t \t \t \t $('.slides').children().css({ 'opacity': 0, 'z-index': 0 }); 
 
\t \t \t \t //$(v).prev().css({ 'opacity': 1, 'z-index': 6 }); 
 
     $($('.slides').children()[e-1]).css({'opacity':1,'z-index':6}); 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
}); 
 

 
$(document).on('click', '.right-btn', function() { 
 
\t var flag = false; 
 
\t $.each($('.slides > li'), function (e, v) { 
 
\t \t if ($(v).css('opacity') > 0) { 
 
\t \t \t if ($(v).index() != $('.slides > li').length - 1 && !flag) { 
 
\t \t \t \t $('.slides').children().css({ 'opacity': 0, 'z-index': 0 }); 
 
\t \t \t \t $($('.slides').children()[e + 1]).css({ 'opacity': 1, 'z-index': 6 }); 
 
\t \t \t \t //$(v).next().css({ 'opacity': 1, 'z-index': 6 }); 
 
\t \t \t \t flag = true; 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button class="btn left-btn"> 
 
\t left 
 
</button> 
 
<button class="btn one"> 
 
\t one 
 
</button> 
 
<button class="btn two"> 
 
\t two 
 
</button> 
 
<button class="btn three"> 
 
\t three 
 
</button> 
 
<button class="btn right-btn"> 
 
    right 
 
</button> 
 
<ul class="slides"> 
 
\t <li>first</li> 
 
\t <li>second</li> 
 
\t <li>third</li> 
 
\t <li>fourth</li> 
 
</ul>