0

彼女は私のhtmlです：

 <div class="product-img-box">
    <p class="product-image product-image-zoom">
        <a href='http://placehold.it/700x600' class='cloud-zoom' id='aMainImageZoom' rel="adjustX: 10, adjustY:-4">
            <asp:Image Style="max-height: 400px; width: 400px;" ImageUrl="http://placehold.it/300x350"
                runat="server" ID="imgProductImageLarge" />
        </a>
    </p>
    <div class="more-views">
        <div class=" jcarousel-skin-tango">
            <ul id="more_view">
                <li><a href='' class='cloud-zoom-gallery' title='Thumbnail 1'
                    rel="useZoom: 'zoom1', smallImage: './images/zoom2.jpg' ">
                    <asp:Image Style="max-height: 92px; width: 92px;" ImageUrl="http://placehold.it/300x351"
                        ID="imgFirst" runat="server" onmouseover='changeImage("thImg5");' /></a></li>
            </ul>
        </div>
    </div>
</div>

そして、ここに私のスクリプトコードがあります:

 <link href="css/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/cloud-zoom.1.0.2.js" type="text/javascript"></script>
$(document).ready(function () {
        $(function () {
            $("#imgFirst").on("mouseenter", function () {
                $("#<%=imgProductImageLarge.ClientID %>").attr("src", this.src);
                $("#aMainImageZoom").attr("href", "http://placehold.it/700x602");
            });
        });
    });
</script>

ここに私のHTMLビューソースがあります:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><link href="css/cloud-zoom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/cloud-zoom.1.0.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(function () {
                $("#imgFirst").on("mouseenter", function () {
                    $("#imgProductImageLarge").attr("src", this.src);
                    $("#aMainImageZoom").attr("href", "http://placehold.it/700x602e");
                });
            });
        });

    </script>
</head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUwNjA3NTE5MmRkpBlwGdNLH5SqyoT+HpJkrN3Qg3IyiI4/4Nchrs2wg+g=" />
</div>

    <div class="product-img-box">
        <p class="product-image product-image-zoom">
            <a href='http://placehold.it/700x600' class='cloud-zoom' id='aMainImageZoom' rel="adjustX: 10, adjustY:-4">
                <img id="imgProductImageLarge" class="mainImage" src="http://placehold.it/300x350" style="max-height: 400px; width: 400px;" />
            </a>
        </p>
        <div class="more-views">
            <div class=" jcarousel-skin-tango">
                <ul id="more_view">
                    <li><a href='' class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: './images/zoom2.jpg' ">
                        <img id="imgFirst" src="http://placehold.it/300x351" style="max-height: 92px; width: 92px;" /></a></li>
                </ul>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

imgFirst のマウスオーバーで aMainImageZoom href aMainImageZoom を変更したい。しかし、MainImageZoom を取得できませんでした。何か考えはありますか？

4

2 に答える 2

1

ロードするからjQueryを使わない理由

デモ

$(function() {
  $("#imgFirst").on("mouseenter",function () {
      $("#<%=imgProductImageLarge.ClientID %>").attr("src",this.src);
      $("#aMainImageZoom").attr("href","some other value");
  });
});
于 2013-02-25T09:35:20.800 に答える
0

以下でこれを試すことができます

$(document).ready(function(){

   $('#imgProductImageLarge').mouseenter(function(){

     $(this).parent("a").attr("href","new-val");
     return false;
   });

});
于 2013-02-25T09:31:57.147 に答える