Javascript css属性处理按钮单击，但不在$内。每个

我有以下代码

以下代码在单击时可以正常工作，但不在$each内。为什么?

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

$document.readyfunction{ $document.on'click'，'one'，函数{ $'.slides.children.css{'opacity'：0，'z-index'：0}； $$'.slides'.children[0].css{'opacity'：1，'z-index'：6}； }; $document.on'click'，'two'，函数{ $'.slides.children.css{'opacity'：0，'z-index'：0}； $$'.slides'.children[1].css{'opacity'：1，'z-index'：6}； }; $document.on'click'，'three'，函数{ $'.slides.children.css{'opacity'：0，'z-index'：0}； $$'.slides'.children[2].css{'opacity'：1，'z-index'：6}； }; $document.on'click'，'left btn'，函数{ var i=0； $。每个$。幻灯片>li'，函数E，v{ 如果$v.css'0{ $'.slides.children.css{'opacity'：0，'z-index'：0}； $$'.slides.children[i].css{'opacity'：1，'z-index'：6}； 控制台logsss+i； } i++； }; }; }; 左边 一 二 三 第一 第二 第三 第四

---

您可以将左按钮代码更改为以下内容。单击左按钮时，将显示上一个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'，函数{ $'.slides.children.css{'opacity'：0，'z-index'：0}； $$'.slides'.children[0].css{'opacity'：1，'z-index'：6}； }; $document.on'click'，'two'，函数{ $'.slides.children.css{'opacity'：0，'z-index'：0}； $$'.slides'.children[1].css{'opacity'：1，'z-index'：6}； }; $document.on'click'，'three'，函数{ $'.slides.children.css{'opacity'：0，'z-index'：0}； $$'.slides'.children[2].css{'opacity'：1，'z-index'：6}； }; $document.on'click'，'left btn'，函数{ $。每个$。幻灯片>li'，函数e，v{ 如果$v.css'0{ 如果$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'，函数{ var标志=假； $。每个$。幻灯片>li'，函数e，v{ 如果$v.css'0{ 如果$v.index！=$”.幻灯片>li'.长度-1&&！标志{ $'.slides.children.css{'opacity'：0，'z-index'：0}； $$'.slides'.children[e+1].css{'opacity'：1，'z-index'：6}； //css{'opacity'：1，'z-index'：6}； flag=true； } } }; }; 左边 一 二 三 正当 第一 第二 第三 第四

---

当你们点击左键时你们想做什么？若第三个li可见，那个么显示第二个，若第二个，那个么显示第一个。但为什么我的代码不起作用呢？同样的.css函数在$之外运行良好。eachI已经将我的代码片段更新到您的代码中，它可以工作，而不是使用单独的变量i，可以使用e来维护索引。然后e-1得到上一个元素的句柄。您可以验证我的更新代码。您可以使用jQuery的prev方法缩短代码。您需要移动到下一个元素。更新了上面的代码。