0

What im trying to do is use jQuery to get the ID/CLASS of a selected image that each have their own unique class (i.e image-1, image-2, etc etc) and having jQuery display a custom value that I tell it to display within another div based on their select.

So far I have:

    <div class="amconf-images-container" id="amconf-images-135">
<img id="amconf-image-66" src="media/amconf/images/66.jpg" class="amconf-image amconf-image-selected">
<img id="amconf-image-216" src="media/amconf/images/216.jpg" class="amconf-image">
<img id="amconf-image-218" src="media/amconf/images/218.jpg" class="amconf-image">
</div>

And trying to use jQuery:

    jQuery(function(){
var div = jQuery('.selectedimage')[0];
    jQuery("img#amconf-image-66.amconf-image amconf-image-selected").bind("change keyup", function(event){
    div.innerHTML = this.value = "Black";
}); });

Multiple times to get each individual possible selection. Unless theres a more efficient way to do this without conflicting with magento's prototype, and own scripts?

Thanks!

Francis Kim
  • 4,235
  • 4
  • 36
  • 51
Gerardo
  • 41
  • 2
  • 10

2 Answers2

0

Change:

img#amconf-image-66.amconf-image amconf-image-selected

To:

img#amconf-image-66.amconf-image.amconf-image-selected
Adrian Lynch
  • 8,237
  • 2
  • 32
  • 40
  • Doesnt seem to be working :/ Whatever the user selects, the class changes from class="amconf-image" to class="amconf-image aconf-image-selected" . Any way to make jquery pull the image based on the image that has that class? Thanks for your answer btw. – Gerardo Apr 28 '13 at 21:37
0

Put the following in a script file referenced in your additional HTML section in the footer, and set data-color on each of the img tags in whatever code is generating them:

jQuery(document).ready(function() {
    jQuery('#amconf-img-container img').each(function() {
      color = jQuery(this).data('color');
      jQuery(this).on('change keyup', function (event) {
        if(jQuery(this).hasClass('selected')) {
            div.innerHTML = event.data.color;
        }}, {color: color});
    });

If I'm understanding what you're going for, anyway...

wierdo
  • 426
  • 2
  • 5