为什么没有设置大图像路径?

时间:2016-02-15 07:11:08

标签: javascript jquery

enter image description here

我不确定这是否正确$('#bigImage').attr("data-big", LargeImagePath);但同样的陈述适用于'src'

IE。在JSP上我获得了mediumImagePath的值,但.attr的{​​{1}}不会使用data-big,因此我应该使用data-big

xyz.js

function getImageDetails(mediumImagePath, LargeImagePath) {
   alert(mediumImagePath+"_______"+mediumImagePath);
   jQuery.ajax({
      type : 'GET',
      url : 'productDetailsPage.do',
      data : {},
      success : function(data) {
         $('#bigImage').attr("src", mediumImagePath);
         $('#bigImage').attr("data-big", LargeImagePath);
         alert(data);           
         $("#productListPage").hide();
         $("#productDetailsPage").show();
      } 
   });
}

这是我要设置这些值的div

Abc.Jsp

<div class="view-product">
  <img id="bigImage" class="fancybox" src=""
       data-big="images/home/suitlarge.jpg" />
    <h3>ZOOM</h3>
</div>

Productdiv.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div>

    <c:forEach items="${products}" var="products">
        <div class="col-sm-4">
            <div class="product-image-wrapper">
                <div class="single-products">
                    <div class="productinfo text-center">
                        <img src="${products.smallImage}" onclick="getImageDetails('${products.mediumImage}', '${products.largeImage}');" alt="${products.productId}productImage" />
                        <h2>${products.allPrice}</h2>
                        <p>${products.name}</p>
                    </div>
                </div>
                    <ul class="nav nav-pills nav-justified">
                        <li><a href=""><i class="fa fa-plus-square"></i>Add to
                                Wishlist</a></li>
                    </ul>
                </div>
            </div>

    </c:forEach>
</div>

请帮忙解释一下是什么问题。

1 个答案:

答案 0 :(得分:0)

如果您想访问data属性,则应使用data而不是attr

因此,您的代码应该类似于$('#bigImage').data("big", LargeImagePath);

以下是一个完整的示例:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var big = $("#bigImage").data("big");
            alert(big);
        });
    </script>
</head>
<body>
    <img id="bigImage" class="fancybox" src="" data-big="images/home/suitlarge.jpg" />
</body>