jQuery/Magento -获取选定的div ID并显示自定义值

Question

我想做的是使用jQuery来获取所选图像的ID/class，每个图像都有自己独特的类(即image-1, image-2等)，并让jQuery显示一个自定义值，我告诉它根据自己的选择在另一个div中显示。

到目前为止，我有:

    <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>

和尝试使用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";
}); });

多次得到每个可能的选择。除非有更有效的方法来做到这一点，而不会与magento的原型和自己的脚本相冲突?

谢谢!

Answer 1

变化:

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

:

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

Answer 2

将以下内容放入脚页附加HTML部分引用的脚本文件中，并在生成img标签的代码中设置每个img标签的data-color:

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});
    });

如果我明白你的意思，不管怎样，