Javascript Magento-单击时显示图像标签

不确定是否有人可以帮助我，但我有一个产品视图页面，在顶部我有一个h1标签中的产品名称

每个产品都有一系列图片附在其上，这些图片的标签为其颜色，即背面、象牙色、布尔加迪色等

我希望产品名称显示如下：

<div class="product-name">
            <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
            <span id="label"><?php echo ' | ' ?><?php echo $_product->getData('image_label');?></span></h1>
         </div>

产品名称|颜色

我已经设法让它发生在第一个（解除）图像

因此，当您进入产品页面时，名称为：

奥尔巴尼|黑色（正是我想要的）

现在，当您单击产品名称的不同颜色选项（即图像）以更改为：

奥尔巴尼象牙城 奥尔巴尼|伯格安迪 奥尔巴尼|巧克力等

我得到了一定程度的帮助，但现在我陷入了困境

有人建议我将主题的script.js文件更改为包含以下内容：

$('.more-views a').click(function(){
$('#label').text( $('img', this).attr('alt')  ); });

我的h1标签周围的代码如下：

<div class="product-name">
            <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
            <span id="label"><?php echo ' | ' ?><?php echo $_product->getData('image_label');?></span></h1>
         </div>

如果有人知道我如何才能做到这一点，我将不胜感激

提前谢谢

有关页面的链接如下：

---

请参阅我的答案。

页面中加载了多个Javascript库（包括scriptaculous、prototype和jQuery）。如果您没有使用

jQuery.noConflict（）

，那么您必须使用

jQuery

，而不是

$

，如果您打算使用jQuery

另外，您已经加载了jQuery1.7+，因此我建议您使用委托来处理这个问题

// don't forget document ready
jQuery(function ($) {

    // let's cache the label
    var _label = $('#label');

    $('.more-views').on('click', 'a img', function () {
        _label.text($(this).attr('alt'));
    });

});

如前所述，您必须在图像中输入

alt

属性才能工作。获取

alt

值并显示它（如果没有开始的话）没有多大意义

<img src="" alt="Blue" />

我看到

img

标记的

HTML

已损坏，所有图像的

alt

属性不包含任何值。请检查元件并查看。如果生成的

HTML

是正确的，你的代码可以工作。谢谢你，我唯一想做的就是修复我的alt代码-它是错误的，因此alt代码没有被回音。有一次，我修正了alt代码，使它能够回音，它就工作了。