Question

我正在使用Materialise设计。我想在点击另一张图片后打开其他图片。

CODE：

<img id="prod-big-image" 
    class="materialboxed" style="width:100%;" 
    src="<catalog:ProductImageUrl  
    pictureId="${product.productPictureMappings[0].pictureId}" productName="${product.name}" 
    useCase="descriptionPageBig"/>" 
                             alt="buy ${product.name}" title="${product.name}">
<div class="center-align">
    <c:forEach items="${product.productPictureMappings}" var="pic" varStatus="loopStatus">
        <a href="<catalog:ProductImageUrl pictureId="${pic.pictureId}" 
           productName="${product.name}" useCase="zoom"/>">
            <img class="abc" class="prod-zoom-img" 
                data-bigimgurl="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="descriptionPageBig"/>" 
                width="60"  src="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="modal-giftbox"/>" 
               alt="view ${product.name}" title="${product.name}">
        </a>
    </c:forEach>
</div>

屏幕拍摄：

小图片不应该是可点击的。如果用户点击小图片，那么大图像触发，放置小图像。

Answer 1

我得到了一个答案，删除锚标记链接。

CODE：

<img id="prod-big-image" class="materialboxed n" style="width:100%;" src="<catalog:ProductImageUrl pictureId="${product.productPictureMappings[0].pictureId}" productName="${product.name}" useCase="descriptionPageBig"/>" 
                             alt="buy ${product.name}" title="${product.name}">
                        <div class="center-align">
                            <c:forEach items="${product.productPictureMappings}" var="pic" varStatus="loopStatus">
                                <a href="#">
                                    <img class="prod-zoom-img materialboxed abc" data-bigimgurl="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="descriptionPageBig"/>" 
                                         width="60"  src="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="modal-giftbox"/>" alt="view ${product.name}" title="${product.name}"/>
                              </a>
                            </c:forEach>
                      </div>

JQUERY：

$('.abc').click(function(){        
            $('.n').trigger('click');
        });

如果您使用锚标记链接拍摄图像，则它将首先重定向到图像。然后删除锚标记链接。

点击图片触发jquery中的其他图片

1 个答案: