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?
If the positioning of the images in the DOM is consistent you could do something like
Or you could give the images a unique class:
and do