2013-02-25 35 views
0

她是我的html:如何獲取與jquery標籤

<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> 

我想要改變aMainImageZoom href aMainImageZoom在imgFirst的鼠標懸停上。但我無法獲得一個主要的圖像縮放。你有什麼主意嗎?

+4

這可能是明智的,把你的js代碼的的document.ready功能不能使用jQuery – 2013-02-25 09:29:58

+1

並使用jQuery來實際完成這項工作 – mplungjan 2013-02-25 09:31:07

+2

@ChetterHummin如果只使用函數需要在document.ready中?因爲那個時候你不一定需要它? – 2013-02-25 09:35:11

回答

0

你可以試試下面

$(document).ready(function(){ 

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

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

}); 
+0

I想要在第一個p標記中更改href而不是在more-views div中。 – cagin 2013-02-25 10:01:38

+0

@cagin,已更新回答 – 2013-02-25 10:05:32

+0

正如您在我的問題中所看到的,我想先更改imgFirst的鼠標懸停的href。我只想做縮放。 – cagin 2013-02-25 10:10:28

1

這是爲什麼,因爲你加載

DEMO

$(function() { 
    $("#imgFirst").on("mouseenter",function() { 
     $("#<%=imgProductImageLarge.ClientID %>").attr("src",this.src); 
     $("#aMainImageZoom").attr("href","some other value"); 
    }); 
}); 
+0

你是對的,但我的問題不在那裏。 – cagin 2013-02-25 10:00:32

+0

卡金,我認爲這是你需要的。從我的回答評論我明白。讓我們知道 – 2013-02-25 10:13:23

+0

$(document).ready(function(){(function(){(「#imgFirst」)。on(「mouseenter」,function(){alert('come in'); (「#<%= imgProductImageLarge.ClientID%>」)。attr(「src」,this.src); }); }); }); 我改變了我的代碼,但沒有提示?任何建議? – cagin 2013-02-25 10:27:33