Tips for ensuring that the click event function properly for numerous elements sharing the same class

Question

Tips for ensuring that the click event function properly for numerous elements sharing the same class

I'm currently working on adding a flip effect to multiple tiles whenever a user clicks on them as part of building a dashboard-style webpage. I am having trouble making the click event work for all tiles with the same class name.

Even though all the tiles have the same class name, they are placed under different "box" divs. The issue I am facing is that the jQuery click event only works for the last tile added, while the others remain static. I have been trying to find a solution to this problem without success. Here is the latest version of the click event code:

var i = 0,
abbrs = document.getElementsByClassName("tile"),
len = abbrs.length;

function addEvent(abbr) {
    abbr.addEventListener("click", function(event) {
        $(this).toggleClass("flip");
    })

}

for (i; i < len; i++){

    addEvent(abbrs[i]);
}

I am unsure where the root cause of the problem lies and would appreciate any help or suggestions.

javascript html css

Answer 1

Answer №1

Check out this Codepen for an implementation using pure javascript.

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

const targets = document.getElementsByClassName('target');
for (var i = 0; i < targets.length; i++) {
    targets[i].addEventListener('click', function(){
        this.classList.toggle("flipped");
    })
}

Alternatively, you can explore this Codepen for a jQuery solution.

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

$('.target').on('click', function() {
  $(this).toggleClass('flipped');
});

NOTE:

Upon reviewing your provided code, it seems that the absolute positioning of divs is being done through large paddings, which is not the recommended approach. It's better to use top|right|bottom|left properties for positioning (view documentation). By making this change in the CSS, your example will work seamlessly even with the current messy javascript. See the updated version here.

Answer 2

Check out this Codepen for an implementation using pure javascript.

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

const targets = document.getElementsByClassName('target');
for (var i = 0; i < targets.length; i++) {
    targets[i].addEventListener('click', function(){
        this.classList.toggle("flipped");
    })
}

Alternatively, you can explore this Codepen for a jQuery solution.

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

$('.target').on('click', function() {
  $(this).toggleClass('flipped');
});

NOTE:

Upon reviewing your provided code, it seems that the absolute positioning of divs is being done through large paddings, which is not the recommended approach. It's better to use top|right|bottom|left properties for positioning (view documentation). By making this change in the CSS, your example will work seamlessly even with the current messy javascript. See the updated version here.

Answer 3

Answer №2

Important Note: Below is a simple code snippet that demonstrates how to toggle effects by clicking on elements with specified classes. If you do not want the effects to be shown, simply do not add the class.

function toggleEffect(){
    if ($(this).hasClass('flip')){
        $(this).removeClass('flip');//removes flip class
    } else {
         $(this).addClass('flip');//add flip class 
    }
}

$(".class1, .class2").click(toggleEffect); //Specify classes here for adding effects and calling functions

.flip{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">Class 1</div>
<span class="class2">Class 2</span>

Answer 4

Important Note: Below is a simple code snippet that demonstrates how to toggle effects by clicking on elements with specified classes. If you do not want the effects to be shown, simply do not add the class.

function toggleEffect(){
    if ($(this).hasClass('flip')){
        $(this).removeClass('flip');//removes flip class
    } else {
         $(this).addClass('flip');//add flip class 
    }
}

$(".class1, .class2").click(toggleEffect); //Specify classes here for adding effects and calling functions

.flip{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">Class 1</div>
<span class="class2">Class 2</span>

Answer 5

Answer №3

I believe that by replacing the snippet provided with this code, it should resolve your issue:

    $(document).ready(function() {
        $(".tile").click(function() {         
            $(".tile").toggleClass("flip");
        });
    });

Depending on the location of this code within your project, you may not require the $(document).ready() event listener that encompasses the "on click" event listener.

Answer 6

I believe that by replacing the snippet provided with this code, it should resolve your issue:

    $(document).ready(function() {
        $(".tile").click(function() {         
            $(".tile").toggleClass("flip");
        });
    });

Depending on the location of this code within your project, you may not require the $(document).ready() event listener that encompasses the "on click" event listener.

Tips for ensuring that the click event function properly for numerous elements sharing the same class

Answer №1

Answer №2

Answer №3

Similar questions

Populate the dropdown menu with data from a JSON file

What is the best way to create a sortable column that is based on a nested object within data.record?

What is the best way to call a JavaScript function within a PHP echo statement that outputs a <div> element?

Customizing div elements in various RMarkdown documents with a CSS file

The data being transmitted by the server is not being received accurately

Approach for checking duplicates or empty input fields through PHP, AJAX, and JavaScript

Transfer information from an array to a Vue function

The values of React children props will always remain consistent

Discovering the largest element within a group to establish the height for the rest

Achieving the grid-column property as you navigate deeper into the tree

Is this example showcasing the use of JavaScript closures?

Paper.js: Is there a way to prevent canvas height and width from changing when the window is resized?

Duplicating labels with JavaScript

A step-by-step guide on retrieving information from Material UI components and incorporating an onSubmit feature to transmit data to the backend server

One common issue popping up in Webpack logs is the error message "net::ERR_SSL_PROTOCOL_ERROR" caused by a call to sock

Fetch the information, insert following, and trigger a slide toggle

Bidirectional communication between two AngularJS scopes or controllers utilizing a service

Compiling a list of products, but the user interface needs some adjustments

Having trouble locating the name WebGLObject in my TypeScript code

Promise and Determination failing to produce results