Question

我想如果第一张幻灯片显示给用户Prev Button不应该显示＆amp;显示最后一张幻灯片时，下一步按钮不应显示...

我已经写了这些代码但是没有工作......：

注意：每张幻灯片都有.ji-active Class，向用户显示...

if ($('.ji-slider div:last').hasClass('ji-active')) {
    $('.ji-next-btn').css('visibility', 'hidden');
} else {
    $('.ji-next-btn').css('visibility', 'visible');
}

if ($('.ji-slider div:first').hasClass('ji-active')) {
    $('.ji-pre-btn').css('visibility', 'hidden');
} else {
    $('.ji-pre-btn').css('visibility', 'visible');
}

我的错误是什么？

这是我的HTML：

        <div class="ji-slider" data-animation="fadeIn">
            <div class="ji-active">
                <img src="Images/Slider (1).png">
                <p class="ji-caption">This Is First !</p>
            </div>
            <div>
                <img src="Images/Slider (2).png">
                <p class="ji-caption">This Is Second !</p>
            </div>
            <button type="button" class="ji-pre-btn">&#10094;</button>
            <button type="button" class="ji-next-btn">&#10095; </button>
        </div>

Answer 1

使用简单的css，左箭头隐藏为第一张幻灯片，右箭头隐藏为last =）

如果没有效果，请添加!important

等visibility: hidden !important;

选择第一张幻灯片，使用课程.ji-active，然后选择与班级.ji-pre-btn同级并隐藏，对于最后一张幻灯片，我使用:last-of-type选择器，因为如果使用{{1}，则需要选择最后一个div然后被选中＆＃34; next＆＃34;按钮。

抱歉我的英语不好。

＆＃13;

:last-child

＆＃13;

img{
  display:block;
  background-color: black;
  width: 100px;
  height: 100px;
}
.ji-slider{
  background-color: #eee;
}
.ji-slider > div:first-child.ji-active ~ .ji-pre-btn{
  visibility: hidden;
}
.ji-slider > div:last-of-type.ji-active ~ .ji-next-btn{
  visibility: hidden;
}

＆＃13;

Answer 2

试试吧

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

Object.keys(raw)
  .filter(key => !allowed.includes(key))
  .forEach(key => delete raw[key]);

console.log(raw);

如何不显示Prev Button＆amp; Slider中的下一个按钮？

2 个答案: