javascript - Add class to next integer on click while removing from current jQuery

Question

I am wrapping the class; slideVisible to the first 3 blog articles displayed. This class removes the css property; display - none. I have added some indicators with the class; carousel-buttons, which also is based on the number of loops of sets of 3 blog posts. On click of these carousel-buttons I would like to remove the class slideVisible from the element which currently has it, and then add to the next element in the sequence.

I have used an index-related selector to demonstrate a way of creating this function, however this is not dynamic. How would I do this correctly?

jQuery(document).ready(function() {
    var carosuelPost = jQuery(".post-slider-mango .post");

    jQuery('.post-slider-mango .fusion-posts-container').wrapAll('<div id="dog-slider"><div class="carousel-inner"></div></div>');

    for (var i = 0; i < carosuelPost.length; i += 3) {
        let activeClass = '';
        if(i == 0) activeClass = 'slideVisible';
        carosuelPost.slice(i, i + 3).wrapAll('<div class="slideElements ' + activeClass + '"> </div>');
    }

    for (var i = 0; i < carosuelPost.length; i += 3) {
        if(i == 0) activeClass = 'slideVisible';
        jQuery(".post-slider-mango .fusion-posts-container").after('<a class="carousel-buttons"><li></li></a>');

        jQuery(".carousel-buttons:eq(0)").on("click", function() {
            jQuery(".slideElements").removeClass("slideVisible");
            jQuery(".slideElements:eq(0)").addClass("slideVisible");
        });

        jQuery(".carousel-buttons:eq(1)").on("click", function() {
            jQuery(".slideElements").removeClass("slideVisible");
            jQuery(".slideElements:eq(1)").addClass("slideVisible");
        });
    }
});

question from:https://stackoverflow.com/questions/65883164/add-class-to-next-integer-on-click-while-removing-from-current-jquery

Answer 1

So it's hard to say because it depends on the element that has the activeClass class and the heirarchy. You can have the .carousel-button on click remove the class from its parent, or parent's parent.

You can use .closest() to find the closest ancestor with x class. So:

// Declare function that removes a given class from given element

// Set click event listener for .carousel-button elements
$('.carousel-button').click(function(e){
   e.preventDefault();
   $(this).closest('div.slideVisible').removeClass('slideVisible');
});

Also to note, I would use a <button> element for the carousel-button so you do not then need to use the e.preventDefault() in the click event. If it is only to be used to run JavaScript via user interaction then you do not need to use an <a> tag.

See snippet for working example.

// Set click event listener for .carousel-button elements
$('.carousel-button').click(function(){
 const next = $(this).closest('div.slideVisible').next().is('.slide');
if (next) {
return $(this).closest('div.slideVisible').removeClass('slideVisible').next().addClass('slideVisible');
} else {
  return $(this).closest('div.slideVisible').removeClass('slideVisible').prev().addClass('slideVisible');
}

});

.slide {
  display:none;
  padding:2rem;
  text-align:center;
background:orange;
}
.slide2 {
background:yellow;
}

.slideVisible {
  display:block;
}

.carousel-button {
  padding:1rem;
}

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

<div class="slide slide1 slideVisible">
  <div class="buttons">
    <button class="carousel-button">Hide Me!</button>
  </div>
</div>
<div class="slide slide2">
  <div class="buttons">
    <p>This is slide 2</p>
    <button class="carousel-button">Hide Me!</button>
  </div>
</div>