CODEWITHSUNDEEP
javascriptjqueryhtmlcss
PraJen
PraJen

Reputation: 606

How to get selector's variable on Onclick

When a selector is assigned to a variable, I need to get that variable name on onclick I have created a Fiddle as an example

 var $main_img1 = $("<div/>").addClass('add1').appendTo($('#main_container'));
 var $main_img2 = $("<div/>").addClass('add2').appendTo($('#main_container'));

 $main_img1.click(function()
 {
     get_id()
 });

 $main_img2.click(function()
 {
      get_id()
 });
 function get_id(event)
 {
      console.log($(this))
      alert('i need to get selector variable on click')
 }

Output should be $main_img1 and $main_img2 when I click on the corresponding div

Upvotes: 1

Views: 216

Answers (3)

karan3112
karan3112

Reputation: 1867

Here is a solution, but not sure how you are going to use it

Used Array to get the variable name.

JS

    var arr = new Array();
    arr[0] = '$main_img1';
    arr[1] = '$main_img2';

    var $main_img1 = $("<div/>").addClass('add1 add').appendTo($('#main_container'));
    var $main_img2 = $("<div/>").addClass('add2 add').appendTo($('#main_container'));

      $main_img1.click(function()
                 {
                    get_id($(this))
                 });

       $main_img2.click(function()
                 {
                    get_id($(this))
                 });
    function get_id(event)
    {
        alert(arr[$('.add').index(event)]);
    }

Update : No array needed.

    function get_id(event)
    {
        ///var temp = '$main_img' + (parseInt($('.add').index(event)) + 1);
        var temp = '$main_img' + (parseInt($('#main_container > div').index(event)) + 1);
        alert(temp);
        console.log(eval(temp));
    }

Updated DEMO

Upvotes: 2

facenord
facenord

Reputation: 1

You could maybe guessing from the class of the element you click on it and use reflexivity.

To know the element you click on it, just use event.target where event is a variable passed in the click function. Look at this fiddle for an example.

The get_id method now looks like this:

function get_id(event) {
    console.log(event.target)
}

The value returned by event.target is the same as the value returned by the variable you declare it ($main_img1 or $main_img2).

Upvotes: 0

Khaleel
Khaleel

Reputation: 1371

I suggest a workaround.. see if it helps you. Add a hidden element inside the corresponding divs and add the variable names as text to it. I slightly modified your method get_id() to get the variable name from your divs hidden element.

function get_id()
{
   console.log($(this))
   var selVar= $(this).parent().find('input:hidden:first').text(); 
   alert('selector variable' + selVar);
}

this will work for you.

Upvotes: 0

Related Questions