如何用opacity替代jQuery的.toggle方法实现div半透明而非完全隐藏？

我编写了如下jQuery函数用于切换#group下的子div：

// DIV scroller prev-next (jQuery)
function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    var index = $current.index();
    var newIndex = index+delta;
    // Range check the new index
    newIndex = (newIndex < 0) ? 0 : ((newIndex > $items.length) ? $items.length : newIndex); 
    if (newIndex != index){
        $current.removeClass('current');
        $current = $items.eq(newIndex).addClass('current');
        // Hide/show the next/prev
        $("#prev").toggle(!$current.is($items.first()));   
        $("#next").toggle(!$current.is($items.last()));    
    }
}

当前点击#next或#prev按钮时可遍历div，功能正常。但其中通过.toggle方法在处于首个div时隐藏#prev，处于最后一个div时隐藏#next。经测试，将按钮设为半透明（类似禁用按钮样式）更友好，想使用opacity:0.5替代.toggle方法，请问该如何实现？

解决方案 #

直接替换.toggle()为透明度设置即可，同时建议配合按钮禁用逻辑和CSS类来优化交互体验，以下是两种实现方式：

方式1：直接操作内联样式+禁用按钮 #

// DIV scroller prev-next (jQuery)
function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    var index = $current.index();
    var newIndex = index+delta;
    // 修复索引范围判断：索引从0开始，最大索引为length-1
    newIndex = (newIndex < 0) ? 0 : ((newIndex > $items.length - 1) ? $items.length - 1 : newIndex); 
    if (newIndex != index){
        $current.removeClass('current');
        $current = $items.eq(newIndex).addClass('current');
        
        // 处理prev按钮状态
        const isFirstItem = $current.is($items.first());
        $("#prev").css('opacity', isFirstItem ? 0.5 : 1)
                  .prop('disabled', isFirstItem);
        
        // 处理next按钮状态
        const isLastItem = $current.is($items.last());
        $("#next").css('opacity', isLastItem ? 0.5 : 1)
                  .prop('disabled', isLastItem);
    }
}

方式2：用CSS类控制（推荐，更易维护） #

先定义CSS类：

.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

再修改JS代码：

// DIV scroller prev-next (jQuery)
function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    var index = $current.index();
    var newIndex = index+delta;
    // 修复索引范围判断
    newIndex = (newIndex < 0) ? 0 : ((newIndex > $items.length - 1) ? $items.length - 1 : newIndex); 
    if (newIndex != index){
        $current.removeClass('current');
        $current = $items.eq(newIndex).addClass('current');
        
        // 用toggleClass一键切换禁用状态
        $("#prev").toggleClass('btn-disabled', $current.is($items.first()));
        $("#next").toggleClass('btn-disabled', $current.is($items.last()));
    }
}

关键修改说明 #

• 修复了原代码中newIndex的范围错误：jQuery的.eq()索引从0开始，最大有效索引是$items.length - 1，原代码的判断会导致索引越界。
• 替换.toggle()为透明度设置，同时添加禁用逻辑，避免用户点击半透明按钮触发无效操作。
• CSS类方式更符合代码规范，后续修改样式只需调整CSS，无需改动JS。

内容的提问来源于stack exchange，提问作者Maurice