0

I have two images with the title "Show Options" it looks like this:

<a class="io-content-pane-header-button-right" style="right: 41px;"><img class="io-content-pane-header-button" src="/document/c947bf0e-0144-4fc8-8a33-ce0d0d698384/latest" title="Show Options"></a>

I have the following jQuery to display another div called "recordViewPopover" when this image is clicked.

$('img[title*=\"Show\"]').live('click', function(e) {
    console.log('RECORD VIEW OPTION SELECTED!');
     e.stopImmediatePropagation();      
    var position = $(this).parent().offset(); 
    $('#recordViewPopover').css('top', (position.top + $(this).height()) - 50);
    console.log(position);
    $('#recordViewPopover').fadeToggle('fast');
    if ($('img[title*=\"Show\"]').hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $('img[title*=\"Show\"]').addClass('active');
    }
  });

The problem is, I want to be able to show another DIV called "objectViewPopover" when the 2nd image is clicked. Right now, when I click on the 2nd image, only "recordViewPopover" is shown.

How can I solve this?

UPDATE:

here is a simpler scenario, I am just going through each of the images:

$('img[title*=\"Show\"]').each(function(index, value){
    if(index === 0){
        console.log('object');
        $(this).live('click', function(e) {

            console.log('OBJECT VIEW OPTION SELECTED!');

        });
    }
    else
        console.log('record');
  });

Why doesn't the click bind to the first match?

4
  • Never mind the last comment. You just want us to write something for you?
    – mowwwalker
    Oct 3, 2011 at 0:32
  • I'm pretty new to jQuery, just wondering how I can get it to match the 2nd image, so I can display the div properly. This current code displays my div, just don't know how to wire it up to the 2nd image so that I can display a different div, they seem to conflict cuz of the name "Show Options" Oct 3, 2011 at 0:36
  • You could just give them each a different id.
    – mowwwalker
    Oct 3, 2011 at 0:39
  • Is there a way to do it, where I don't have to give it a different id? I don't control that, and the code should be robust enough to get the 2nd image. Oct 3, 2011 at 0:46

3 Answers 3

0

If the positioning of the images in the DOM is consistent you could do something like

if($(this).is(':last-child'))...

Or you could give the images a unique class:

<a class="io-content-pane-header-button-right recordView" style="right: 41px;"><img class="io-content-pane-header-button" src="/some/src" title="Show Options"></a>

<a class="io-content-pane-header-button-right objectView" style="right: 41px;"><img class="io-content-pane-header-button" src="/some/other/src" title="Show Options"></a>

and do

if($(this).hasClass('objectView'))...
3
  • I tried the :last-child method and also comparing .last() but I get the same results as in my original question. Oct 3, 2011 at 1:04
  • Did you try the hasClass() logic? Oct 3, 2011 at 3:49
  • I unfortunately don't have control of how the front-end is being presented to me. I have to work with the constraints that I have presented, so I can't use hasClass in this scenario. Oct 3, 2011 at 3:55
0
img1=$('img[title*=\"Show\"]')[0];
img2=$('img[title*=\"Show\"]')[1];
$(img1).live('click', function(e) {
    console.log('RECORD VIEW OPTION SELECTED!');
     e.stopImmediatePropagation();      
    var position = $(this).parent().offset(); 
    $('#recordViewPopover').css('top', (position.top + $(this).height()) - 50);
    console.log(position);
    $('#recordViewPopover').fadeToggle('fast');
    if ($(img1).hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $(img1).addClass('active');
    }
  });



  $(img2).live('click', function(e) {
    console.log('OBJECT VIEW OPTION SELECTED!');
     e.stopImmediatePropagation();      
    var position = $(this).parent().offset(); 
    $('objectViewPopover').css('top', (position.top + $(this).height()) - 50);
    console.log(position);
    $('objectViewPopover').fadeToggle('fast');
    if ($(img2).hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $(img2).addClass('active');
    }
  });

I'm not great with jQuery, but try that.

4
  • Unfortunately that didn't work. Same results as the code in my question. Oct 3, 2011 at 1:04
  • Odd, I would assume that to work, but now none of them do anything. the console.log doesn't trigger. Oct 3, 2011 at 1:12
  • @SheehanAlam, Sorry, I really don't know what's up then.
    – mowwwalker
    Oct 3, 2011 at 1:30
  • Is there any way you can provide a jsfiddle for this or link us to your page?
    – mowwwalker
    Oct 3, 2011 at 1:30
0

In the images add data attribute, something like this

First Image: <img class="io-content-pane-header-button" data-divid="recordViewPopover"...> 

Second Image: <img class="io-content-pane-header-button" data-divid="objectViewPopover"...> 

and change

$('#recordViewPopover')

to

$('#' + $(this).data("divid"))

and change

$('img[title*=\"Show\"]')

to

$(this)

in your code.

Demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.