使用不透明度而不是.toggle方法来部分隐藏div而不是完全隐藏它

Question

我有以下功能:

// 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或#prevdiv时，迭代一定数量的div。

这部分代码是我卡住的地方:

// Hide/show the next/prev
$("#prev").toggle(!$current.is($items.first()));   
$("#next").toggle(!$current.is($items.last()));   

它的作用:当它在div的第一个div上滚动时，它将隐藏#prevdiv(因为没有什么可回去的，它在第一个)。当它位于最后一个div时也是如此，它将隐藏#nextdiv。

目前它将隐藏和显示这些div，因为我已经使用.toggle。在测试时，我发现不隐藏div而是使其半透明(有点像禁用按钮的样子)对用户更友好。

所以我想使用opacity: 0.5。根据jQuery网站:.css('opacity', '0.5');，但是如何实现这个代替.toggle呢?

我有点迷失在这里，我希望有人在这个网站可以帮助我。

Answer 1

因为我认为你也会想要设置disabled属性与0.5不透明度的按钮，我认为最好把opacity规则在CSS，而不是在JavaScript。然后我们只需要切换按钮的disabled属性。CSS应该是:

button[disabled] {
opacity: 0.5;
}

要切换disabled属性，我们可以使用jQuery的。attr方法:

const hasPrev = newIndex !== 0;
const hasNext = newIndex !== $items.length - 1;

$('#prev').attr('disabled', !hasPrev);
$('#next').attr('disabled', !hasNext);

下面是一个完整的代码示例。请注意，我已经改变了你的updateItems函数体，因为我正在努力理解它。

function updateItems(delta) {
const $items = $('#group').children();
const currentIndex = $items.filter('.current').index();
const newIndex = Math.max(0, Math.min(currentIndex + delta, $items.length - 1));
$items.each(function (index) {
$(this).toggleClass('current', index === newIndex);
});

const hasPrev = newIndex !== 0;
const hasNext = newIndex !== $items.length - 1;

$('#prev').attr('disabled', !hasPrev);
$('#next').attr('disabled', !hasNext);
}
$('#prev').on('click', function () {
updateItems(-1);
});
$('#next').on('click', function () {
updateItems(1);
});

button[disabled] {
opacity: 0.5;
}
li {
background: #aaa;
border: 5px solid #333;
height: 50px;
margin: 10px;
}
li.current {
background: #27bde2;
border-color: #127790;
}
#group {
list-style: none;
padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="group">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button disabled id="prev" type="button">Previous</button>
<button id="next" type="button">Next</button>