Question

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

每件产品都附有一系列图片，上面标有颜色，即背面，象牙，burgandy等。

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

产品名称|颜色

我已经设法让第一个（defualt）图像发生。

因此，当您转到产品页面时，名称为：

奥尔巴尼|黑色（完全如我所愿）

我现在想要当您点击产品名称的不同颜色选项（图像）时更改为：

奥尔巴尼|象牙奥尔巴尼|勃艮第奥尔巴尼|巧克力等等。

我已收到一定数量的帮助，但现在我被困住了。

我被建议更改主题的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>

如果有人知道如何实现这一目标，我将非常感激。

提前致谢。

相关网页的链接位于：

http://dansiop.com/yarwood/index.php/albany.html

Answer 1

你已经在页面中加载了几个Javascript库（包括scriptaculous，prototype和jQuery）。如果你开始使用jQuery，那么如果你没有使用jQuery.noConflict()，那么你将不得不使用jQuery而不是$。

另外，你加载了jQuery 1.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" />

Answer 2

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

请在此回答之前查看我的comment。

Magento - 点击显示图像标签

2 个答案: