Javascript 如何使用jquery获取标记_Javascript_Jquery_Zooming

Javascript 如何使用jquery获取标记

javascript jquery

Javascript 如何使用jquery获取标记,javascript,jquery,zooming,Javascript,Jquery,Zooming,她是我的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

她是我的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>


$（文档）.ready（函数（）{
$（函数（）{
$（“#imgFirst”）。在（“鼠标指针”，函数（）{
$（“#”）attr（“src”，this.src）；
$（“#aMainImageZoom”）.attr（“href，”http://placehold.it/700x602");
});
});
});

以下是我的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>


$（文档）.ready（函数（）{
$（函数（）{
$（“#imgFirst”）。在（“鼠标指针”，函数（）{
$（“#imgProductImageLarge”）.attr（“src”，this.src）；
$（“#aMainImageZoom”）.attr（“href，”http://placehold.it/700x602e");
});
});
});

我想在imgFirst上方的鼠标上更改aMainImageZoom href aMainImageZoom a。但我找不到一张照片。你有什么想法吗？

你可以在下面试试

$(document).ready(function(){

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

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

});

既然加载了jQuery，为什么不使用它呢

$（函数（）{
$（“#imgFirst”）。在（“鼠标指针”，函数（）{
$（“#”）attr（“src”，this.src）；
$（“#aMainImageZoom”）.attr（“href”，“其他值”）；
});
});

将js代码放在文档中可能是明智的。ready function并使用jQuery实际执行job@ChetterHummin如果只使用函数，则需要在文档中。准备好了吗？因为此时不一定需要它？请删除包装

$（document）.ready（函数（）{…}）自<代码>$（函数（）{…}）

与document相同。就绪…我想更改第一个p标记中的a href，而不是更多视图div中的a href。正如您在我的问题中所看到的，我想更改imgFirst鼠标上方的第一个a href。我只想做缩放。@cagin，mouseenter会帮忙的？我想是的，没问题。cagin，我想这就是你需要的。从我的回答中我明白了。让我们知道$（document）.ready（function（）{$（function（）{$（“#imgFirst”）.on（“mouseenter”，function（）{alert（'come in'）；$（“#”）.attr（“src”，this.src）；}）；我更改了代码，但没有警报？有什么建议吗？我用你编辑的图像更改了我的java脚本，但图像没有更改，而且aMainImageZoom的href属性也没有更改。我尝试过，但对我来说结果相同。可能是我的css或javascript文件中包含了错误的内容？这是可能的。查看控制台（F12）

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