Is there a way to identify if an element has been clicked using jQuery upon initial page load?

Question

Is there a way to identify if an element has been clicked using jQuery upon initial page load?

Currently, I am attempting to assign a javascript variable to one of several possibilities.

If a specific link has not been clicked (such as on the initial page load), then the variable should default to 0 or 1.

However, if one of those links has been clicked, I want the variable to receive the number associated with that particular link.

Imagine the HTML structure is like this:

<a href=""><img src="icon2.png" id="icon-2"></a> |
<a href=""><img src="icon3.png" id="icon-3"></a> |
<a href=""><img src="icon4.png" id="icon-4"></a> |

In jQuery, the variable setup could look something like this:

var icon_num = 2; // This will change based on which 'icon' is clicked.

javascript jquery html css

Answer 1

Answer №1

One way to achieve this functionality is by implementing the following approach:

let current_icon = 0;
$("#container img").click(function() {
  current_icon = parseInt(this.id.replace("icon-",""), 10);
});

Alternatively, you could assign a data attribute containing only the ID like so:

<img src="icon3.png" data-id="3" />

By utilizing this method, your code can be streamlined as follows:

let current_icon = 0;
$("#container img").click(function() {
  current_icon = parseInt($(this).attr("data-id"), 10);
});

Answer 2

One way to achieve this functionality is by implementing the following approach:

let current_icon = 0;
$("#container img").click(function() {
  current_icon = parseInt(this.id.replace("icon-",""), 10);
});

Alternatively, you could assign a data attribute containing only the ID like so:

<img src="icon3.png" data-id="3" />

By utilizing this method, your code can be streamlined as follows:

let current_icon = 0;
$("#container img").click(function() {
  current_icon = parseInt($(this).attr("data-id"), 10);
});

Answer 3

Answer №2

Click here for an illustrative example

let selected_icon = null;  // no icon selected initially

$('a').bind('click', function(e) {

   e.stopPropagation();

   selected_icon = $(this).find('>img').attr('id').split('-')[1];

   return false;

});

Answer 4

Click here for an illustrative example

let selected_icon = null;  // no icon selected initially

$('a').bind('click', function(e) {

   e.stopPropagation();

   selected_icon = $(this).find('>img').attr('id').split('-')[1];

   return false;

});

Is there a way to identify if an element has been clicked using jQuery upon initial page load?

Answer №1

Answer №2

Similar questions

Initiating an audio call exclusively via SimpleWebRTC

Filtering data in AngularJS by parsing JSON records

Retrieving the $scope data from within an http.get callback

Enhance the appearance of the standard black rectangle displaying the messages "No video source" or "No video permissions"

What is the best way to submit a form inside a Bootstrap (4) modal that only contains hidden inputs when pressing the enter key?

Creating a fading header effect with a gradual transition as it disappears

Can you explain the difference between a public app and express.Application?

Tips for customizing the appearance of a specific cell in the first column of a Material UI table

Text width that adjusts dynamically

Enhance User Experience with jQuery Toggle Feature

Changing the Row's Background Color in Angular When the Button is Clicked

Ways to eliminate the gap between the currency symbol and the numerical value in HTML

Looped jQuery setTimeout not functioning correctly

Calculate the number of input boxes that have been filled

Obtain appended data from the formData

How can I construct a frame-like structure using PHP and HTML?

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

Tips for properly implementing ng-hide and ng-show across various sections of your single page application

Can you please explain the significance of the code "!!~this.roles.indexOf('*')" within the MEAN.io framework?

Deactivating upcoming weeks according to the year in Angular 8