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;
            }
        }
    });
});

＆＃13;

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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>
<button class="btn right-btn">
    right
</button>
<ul class="slides">
	<li>first</li>
	<li>second</li>
	<li>third</li>
	<li>fourth</li>
</ul>

＆＃13;

＆＃13;

＆＃13;