Javascript 为什么只是<；ul>；能否响应查询功能？

伙计们，我现在使用web.py+jQuery来完成一个小网站。但是我遇到了一个问题。示例代码为blow。当我创建一组li元素时，jQuery事件只响应第一个元素。但其他人从未调用jQuery函数。为什么会发生这种情况？许多人认为：）

html和python

<ul id="products" style="list-style:none;">
    $for item in data.response["Galleries"]:
     <li style="float:left" id="photoLink">
      <a href="$item['PhotoUrl']">
        <img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
         </a>
        <div id="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
     </li>
</ul>

数据中的项目为$。响应[“库”]：

jQuery

<script type="text/javascript">
$$(document).ready(function(){
  $$("#photoLink").mouseenter(function(){
    $$("#img_menu").css("margin-top","-20px");
  });

  $$("#photoLink").mouseleave(function(){
    $$("#img_menu").css("margin-top","0px");
  });
});
</script>

<script type="text/javascript">
$$(document).ready(function(){
  $$(".photoLink").mouseenter(function(){
    $$(this).find(".img_menu").css("margin-top","-20px");
  });

  $$(".photoLink").mouseleave(function(){
    $$(this).find(".img_menu").css("margin-top","0px");
  });
});
</script>

$$（文档）.ready（函数（）{
$$（“#photoLink”）.mouseenter（函数（）{
$$（“#img_menu”）.css（“页边距顶部”，“-20px”）；
});
$$（“#photoLink”）.mouseleave（函数（）{
$$（“#img_菜单”）.css（“页边距顶部”、“0px”）；
});
});

Id

不能在页面上重复。它们必须是独一无二的。如果页面上存在相同的多个ID，则选择器仅选择第一个ID。因此，您需要使用类选择器而不是Id

jQuery

<script type="text/javascript">
$$(document).ready(function(){
  $$(".photoLink").mouseenter(function(){
    $$(this).find(".img_menu").css("margin-top","-20px");
  });

  $$("#photoLink").mouseleave(function(){
    $$(this).find(".img_menu").css("margin-top","0px");
  });
});
</script>

$$（文档）.ready（函数（）{
$$（“.photoLink”）.mouseenter（函数（）{
$$（this.find（“.img_menu”）.css（“页边距顶部”，“-20px”）；
});
$$（“#photoLink”）.mouseleave（函数（）{
$$（this.find（“.img_menu”）.css（“页边距顶部”、“0px”）；
});
});

在HTML中，ID必须是唯一的，使用类代替

<ul id="products" style="list-style:none;">
    $for item in data.response["Galleries"]:
     <li style="float:left" class="photoLink">
      <a href="$item['PhotoUrl']">
        <img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
         </a>
        <div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
     </li>
</ul>

数据中的项目为$。响应[“库”]：

jQuery

<script type="text/javascript">
$$(document).ready(function(){
  $$("#photoLink").mouseenter(function(){
    $$("#img_menu").css("margin-top","-20px");
  });

  $$("#photoLink").mouseleave(function(){
    $$("#img_menu").css("margin-top","0px");
  });
});
</script>

<script type="text/javascript">
$$(document).ready(function(){
  $$(".photoLink").mouseenter(function(){
    $$(this).find(".img_menu").css("margin-top","-20px");
  });

  $$(".photoLink").mouseleave(function(){
    $$(this).find(".img_menu").css("margin-top","0px");
  });
});
</script>

$$（文档）.ready（函数（）{
$$（“.photoLink”）.mouseenter（函数（）{
$$（this.find（“.img_menu”）.css（“页边距顶部”，“-20px”）；
});
$$（“.photoLink”）.mouseleave（函数（）{
$$（this.find（“.img_menu”）.css（“页边距顶部”、“0px”）；
});
});

此外，您还可以使用

$$（文档）.ready（函数（）{
$$（“.photoLink”）.hover（函数（）{
$$（this.find（“.img_menu”）.css（“页边距顶部”，“-20px”）；
}，函数（）{
$$（this.find（“.img_menu”）.css（“页边距顶部”、“0px”）；
});
});

因为一个元素的ID必须是唯一的，所以改用类

<ul id="products" style="list-style:none;">
    $for item in data.response["Galleries"]:
     <li style="float:left" class="photoLink">
      <a href="$item['PhotoUrl']">
        <img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
         </a>
        <div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
     </li>
</ul>

---

太好了，谢谢你的帮助！

$$(function ($) {
    $(".photoLink").hover(function () {
        $(this).find(".img_menu").css("margin-top", "-20px");
    }, function () {
        $(this).find(".img_menu").css("margin-top", "0px");
    });
});