How to add Prev and next buttons to change on outer divs

Question

I have this sample navigation that I'm trying to create. What I want to achieve is when you clicked on prev or next class. The active class will be added to map-inr and the scale_text will also be added to the global_map_location class. I believe that only the eq() function will be used in this part.

Here's my js Code:

 // 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>

I have tried this on next button:

//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');
  }
});

But it just keeps adding classes to next div. How to remove the classes from prev sections/divs? Is there any proper way to do it?

Answer 1

When user click on Prev and Next anchor tag which have Yellow background then only it should work. It is not feasible solution to make all the prev and next anchor tag click work. Only yellow background prev and next click should work.

Below is the code which match up the scenario which is explained above and also it will give you the user friendly standard view:

$(".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");
}

Please replace it with your prev and next click jQuery.

Let me know if you have any issues or modification request.