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

Question

我正在使用 Materialise 设计。我想在单击另一张图像后打开另一张图像。

代码:

<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

我得到了答案，删除 anchor 标记链接。

代码:

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

如果您正在拍摄带有 anchor 标记链接的图像，那么它将首先重定向到图像。然后删除 anchor 标记链接。