如何添加上一個和下一個按鈕以更改外部div

我有我正在嘗試創建的示例導航。我想要實作的是當你點擊prev或next上課時。該類active將被添加到該類中map-inr，該類scale_text也將被添加到global_map_location該類中。相信eq()這部分只會用到函式。

這是我的js代碼：

// Open Popup
$(".map-inr").on("click", function () {
  let myIndex = $(this).closest(".global-map").index() - 1;
  $('.map-inr').removeClass('active');
  $(this).addClass('active');

  $('.global_map_location').removeClass('scale_text');
  $(this).closest(".global-map").find('.global_map_location').addClass('scale_text');

  if ($(".map-item.is--show").length) {
    $(".map-item").removeClass("is--show");
    setTimeout(function () {
      $(".map-item").eq(myIndex).addClass("is--show");
    }, 600);
  } else {
    $(".map-item").eq(myIndex).addClass("is--show");
  }
});

//Next function
$('.next').click(function(){
  
  if ($('.is--show').next('.map-item').length) {
    $('.is--show').removeClass('is--show')
      .next('.map-item')
      .addClass('is--show');
  }
});

//Prev function
$('.prev').click(function(){
  if ($('.is--show').prev('.map-item').length) {
    $('.is--show').removeClass('is--show')
      .prev('.map-item')
      .addClass('is--show');
  }
});

.global-map {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  margin-bottom: 20px;
}

.map-inr {
  background: red;
  width: 150px;
  height: 150px;
  cursor: pointer;
}

.map-inr.active {
  background: yellow;
}

.global_map_location.scale_text {
  font-weight: 600;
}

.contain {
  width: 100%;
  max-width: 1000px;
  margin: 50px auto 0;
  padding: 0;
}

.map-item {
  display: inline-block;
  vertical-align: top;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
}

.map-item.is--show {
  background: yellow;
}

.slider-arrow-wrapper {
  margin-bottom: 20px;
}

.slider-arrow-wrapper .prev,
.slider-arrow-wrapper .next {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="global-map">
  <div class="map-inr active"></div>
  <p class="global_map_location scale_text">map1</p>
</div>

<div class="global-map">
  <div class="map-inr"></div>
  <p class="global_map_location">map2</p>
</div>

<div class="global-map">
  <div class="map-inr"></div>
  <p class="global_map_location">map3</p>
</div>

<div class="contain">

  <div class="map-item is--show">
    <div class="slider-arrow-wrapper">
      <a href="#" class="prev">prev</a>
      <a href="#" class="next">next</a>
    </div>
    1
  </div>

  <div class="map-item">
    <div class="slider-arrow-wrapper">
      <a href="#" class="prev">prev</a>
      <a href="#" class="next">next</a>
    </div>
    2</div>

  <div class="map-item">
    <div class="slider-arrow-wrapper">
      <a href="#" class="prev">prev</a>
      <a href="#" class="next">next</a>
    </div>
    3</div>

</div>

我在下一個按鈕上試過這個：

//Next function
$('.next').click(function(){
let nextIndex = $(this).closest(".map-item").index()   1;
  console.log("This next is "   nextIndex);
  
  $(".global-map").eq(nextIndex).find('.map-inr').addClass("active");
  
  $(".global-map").eq(nextIndex).find('.global_map_location').addClass("scale_text");
  
  
  if ($('.is--show').next('.map-item').length) {
    $('.is--show').removeClass('is--show')
      .next('.map-item')
      .addClass('is--show');
  }
});

但它只是不斷向下一個 div 添加類。如何從 prev 部分/div 中洗掉類？有什么合適的方法嗎？

uj5u.com熱心網友回復：

當用戶單擊具有黃色背景的上一個和下一個錨標記時，只有它應該起作用。讓所有 prev 和 next 錨標簽點擊作業是不可行的解決方案。只有黃色背景 prev 和 next click 應該起作用。

下面是與上面解釋的場景相匹配的代碼，它也會為您提供用戶友好的標準視圖：

$(".next").on('click', function(e) {
e.preventDefault();
if($(this).closest(".map-item.is--show").next().length > 0)
{
$(".contain .is--show").removeClass('is--show').next().addClass("is--show");
$(".map-inr.active").removeClass('active').parent().next().children(".map-inr").addClass("active");
}

});

$(".prev").on('click', function(e) {
e.preventDefault();
if($(this).closest(".map-item.is--show").prev().length > 0)
{
$(".contain .is--show").removeClass('is--show').prev().addClass("is--show");
$(".map-inr.active").removeClass('active').parent().prev().children(".map-inr").addClass("active");
}

請用您的上一個替換它，然后單擊 jQuery。

如果您有任何問題或修改請求，請告訴我。

標籤：javascriptjQuery导航

上一篇：當location.state為空時如何導航到其他頁面

下一篇：使用用戶輸入中的getElementById創建URL超鏈接(href)