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

Avoid the ability for individuals to interact with the icon embedded within a button

What is the process for applying CSS styles to a particular component?

Are there more efficient methods than having to include require('mongoose') in each models file?

Searching an array object inside another array object using JavaScript/AngularJS

Updating a $scope variable within a loop in AngularJS

I'm encountering an issue with this error message: "Warning: Each item in a list must be assigned a unique 'key' prop."

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

Creating an interactive date selection feature with a calendar icon in MVC 5

Is it possible for me to convert my .ejs file to .html in order to make it compatible with Node.js and Express?

Refresh page to reload JSON file with jQuery

Navigating the file paths for Vue.js assets while utilizing the v-for directive

Leverage the power of DOMXPath in combination with the query function

Encountering difficulties accessing the array in the controller through ajax

Error in background request for Chrome app/extension, or problem allowing app to access Google Docs API

Can a browser still execute AJAX even if the window.location is altered right away?

Having trouble with Image and Css not displaying correctly when using CodeIgniter 3 with DomPDF?

Is there a way to position my image and text side by side?

Invoke a method in an Angular 2 component using an HTML event

The peculiar actions of the Array.function(Object.keys(Obj[0]).map()) function

What is the best way to control the amount of rows displayed in my gallery at any given time?