Modify the background color attributes within the provided array

Question

Modify the background color attributes within the provided array

Pagination functionality: I am looking to modify the background color when a user clicks on any element within an array. Currently, the code below allows me to achieve this effect. However, I would like the previously clicked element and all other elements in the array to revert back to their original styling with the class pagins. Any suggestions on how I can accomplish this?

.pagins a {
 color: #fff;
 background-color:#009de0;
}

.testClass {
 background-color:#fff !important;
 color:#009de0 !important;
}

var elements = document.getElementsByClassName('pagins');
$.each(elements, function(){
    $(elements).click(function(){
        $(this).addClass('testClass');
    });
})

javascript jquery css arrays

Answer 1

Answer №1

Avoid using $.each(), as it can cause the click handler to be called multiple times per click when looping in jQuery.

Since you are already using jQuery, opt for $('.pagins') instead of

document.getElementsByClassName('pagins')

.

If you only want the most recently clicked .pagins element to have the testClass class, make sure to remove the class from all other .pagins.testClass elements before adding it to the clicked element.

$('.pagins').click(function(){
    $('.pagins.testClass').removeClass('testClass');
    $(this).addClass('testClass');
});

Answer 2

Avoid using $.each(), as it can cause the click handler to be called multiple times per click when looping in jQuery.

Since you are already using jQuery, opt for $('.pagins') instead of

document.getElementsByClassName('pagins')

.

If you only want the most recently clicked .pagins element to have the testClass class, make sure to remove the class from all other .pagins.testClass elements before adding it to the clicked element.

$('.pagins').click(function(){
    $('.pagins.testClass').removeClass('testClass');
    $(this).addClass('testClass');
});

Answer 3

Answer №2

Make sure to eliminate the testClass from every element prior to appending it to the chosen element.

  $.each(elements, function(){
        $(elements).click(function() {
            $(elements).removeClass('testClass');      
            $(this).addClass('testClass');                                          
        });
    });

Answer 4

Make sure to eliminate the testClass from every element prior to appending it to the chosen element.

  $.each(elements, function(){
        $(elements).click(function() {
            $(elements).removeClass('testClass');      
            $(this).addClass('testClass');                                          
        });
    });

Answer 5

Answer №3

const allPages = document.getElementsByClassName('pagination');
$.each(allPages, function(){
    $(allPages).click(function(){
        $.each(allPages, function() {$(this).removeClass('active')});
        $(this).addClass('active');                                          
    });
})

Answer 6

const allPages = document.getElementsByClassName('pagination');
$.each(allPages, function(){
    $(allPages).click(function(){
        $.each(allPages, function() {$(this).removeClass('active')});
        $(this).addClass('active');                                          
    });
})

Answer 7

Answer №4

To streamline your code, you have the option of simplifying it like so:

$(".testClass").removeClass("testClass");
$(".pagins").click(function() {
    $(this).addClass('testClass');
});

This method works by assigning a click function to all elements that share a specific class selector.

Answer 8

To streamline your code, you have the option of simplifying it like so:

$(".testClass").removeClass("testClass");
$(".pagins").click(function() {
    $(this).addClass('testClass');
});

This method works by assigning a click function to all elements that share a specific class selector.

Modify the background color attributes within the provided array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unable to adjust the size of the icons sourced from https://github.com/erikflowers/weather-icons

What causes the excess spacing in flexbox containers?

Changing the image source attribute with jQuery

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

How can PHP be used to group arrays that share common values to prepare them for JSON output?

Enhance user experience by implementing an autocomplete feature for a text input field

Tips for activating a sticky navigation button by scrolling down slightly

The XML data does not provide any website addresses

Displaying a dynamic splash screen during the resource-loading process on an Android application

Harnessing the Power of React with Javascript Promises

Converting API data to an array map in React with Typescript

Reorganize files with sequential numbers using Gulp, starting from the highest number within the directory

Transfer both files and text strings to PHP using FormData

What separates the placement of "allScriptsTimeout" within and outside of "jasmineNodeOpts" in a protractor conf.js file?

The button is disabled once inline CSS is applied to it

What could be causing my HTML form placed within a jQuery-UI dialog to fail submitting?

Which option is more suitable for my needs: utilizing an array or an sqlite database

Tips for implementing a time delay before copying a message in Discord.js and node.js to account for edits made after a few seconds

Align the video element to the top left corner using Bootstrap 4

Why is the value retrieved from e.target.parentNode.children[0].innerText always different from the value returned by the filter function?