單擊時將類添加到串列中的下一個元素（但在最后一個元素之后停止）

因此，我創建了一個功能，您可以在其中滾動串列中的不同日期，當用戶單擊Next或Prev按鈕時，該類active將從當前元素中洗掉并添加到下一個元素中。

我的問題是，當您到達串列的最后時，如果您按下一步，它就會中斷- 我的問題是您是否可以停止該功能或禁用按鈕等......當到達末尾時。

$('#timeline-next').click(function() {
    $('.timeline-dates div.active').removeClass('active').next('div').addClass('active');
});

$('#timeline-prev').click(function() {
    $('.timeline-dates div.active').removeClass('active').prev('div').addClass('active');
});

.timeline-dates {
  display:flex;
  border-bottom:1px solid gray;
}
.timeline-dates > div {
  position:relative;
  padding:25px;
  margin-right:30px;
}
b, span {
  display:block;
  transition:all 0.3s ease-in-out;
  color:black;
}
span {
  font-size:16px;
}
b {
  font-size:24px;
}

.timeline-dates > div::after {
  content: "";
  position: absolute;
  transition: all 0.3s ease-in-out;
  bottom: 0;
  left: unset;
  right: 0;
  height: 3px;
  width: 0%;
  background: red;
}

/* Active */
.timeline-dates > div.active b, .timeline-dates > div.active span {
  color:red
}
.timeline-dates > div.active::after {
  width: 100%;
  right: unset;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="timeline-dates">

  <div class="active">
    <span>Jan</span>
    <b>2000</b>
  </div>
  <div>
    <span>Feb</span>
    <b>2000</b>
  </div>
  <div>
    <span>Mar</span>
    <b>2000</b>
  </div>

</div>

<div class="nav">
  <button id="timeline-prev">
    PREV
  </button>
  <button id="timeline-next">
    NEXT
  </button>
</div>

JSFiddle

uj5u.com熱心網友回復：

你可以做一個這樣的函式：

function buttons() {
  $('#timeline-next').prop("disabled", $('.timeline-dates div.active').next("div").length == 0)
  $('#timeline-prev').prop("disabled", $('.timeline-dates div.active').prev("div").length == 0)
}

并從您的每個點擊事件中呼叫它。

演示

顯示代碼片段

$('#timeline-next').click(function() {
  $('.timeline-dates div.active').removeClass('active').next('div').addClass('active');
  buttons()
});

$('#timeline-prev').click(function() {
  $('.timeline-dates div.active').removeClass('active').prev('div').addClass('active');
  buttons()
});
buttons();
function buttons() {
  $('#timeline-next').prop("disabled", $('.timeline-dates div.active').next("div").length == 0)
  $('#timeline-prev').prop("disabled", $('.timeline-dates div.active').prev("div").length == 0)
}

.timeline-dates {
  display: flex;
  border-bottom: 1px solid gray;
}

.timeline-dates>div {
  position: relative;
  padding: 25px;
  margin-right: 30px;
}

b,
span {
  display: block;
  transition: all 0.3s ease-in-out;
  color: black;
}

span {
  font-size: 16px;
}

b {
  font-size: 24px;
}

.timeline-dates>div::after {
  content: "";
  position: absolute;
  transition: all 0.3s ease-in-out;
  bottom: 0;
  left: unset;
  right: 0;
  height: 3px;
  width: 0%;
  background: red;
}


/* Active */

.timeline-dates>div.active b,
.timeline-dates>div.active span {
  color: red
}

.timeline-dates>div.active::after {
  width: 100%;
  right: unset;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="timeline-dates">

  <div class="active">
    <span>Jan</span>
    <b>2000</b>
  </div>
  <div>
    <span>Feb</span>
    <b>2000</b>
  </div>
  <div>
    <span>Mar</span>
    <b>2000</b>
  </div>

</div>

<div class="nav">
  <button id="timeline-prev">
    PREV
  </button>
  <button id="timeline-next">
    NEXT
  </button>
</div>

uj5u.com熱心網友回復：

像下面一樣改變你的js，

$('#timeline-next').click(function() {
   if ($('.timeline-dates div.active').next('div').length != 0) {
       $('.timeline-dates div.active').removeClass('active').next('div').addClass('active');
   }
});

$('#timeline-prev').click(function() {
   if ($('.timeline-dates div.active').prev('div').length != 0) {
       $('.timeline-dates div.active').removeClass('active').prev('div').addClass('active');
   }
});

我希望它對你有用。

標籤：html 查询

上一篇：根據輸入替換div中的特定符號

下一篇：彈出視窗顯示不正確