Question

<script type="text/javascript">
$(document).ready(function() {
    $(".slider_link").each(function(i, elem){
        elem.click(function(){
            $("div#"+elem.attr("tag")).slideUp(300);
        });
    });
});

</script>

但是在第一个（通过警告检查）之后，它打破了说index.html没有方法点击...那是什么？

HTML：

        <li><a href="#" tag="home" class="slider_link">Home</a></li>
        <li><a href="#" tag="calendar" class="slider_link">Calendar</a></li>
        <li><a href="#" tag="officers" class="slider_link">Officers</a></li>
        <li><a href="#" tag="media" class="slider_link">Media</a></li>

Answer 1

问题是elem是当前的DOM元素，而不是具有.click() method的jQuery对象，要么使用$()将它包装在jQuery对象中，如下所示：< / p>

$(document).ready(function() {
    $(".slider_link").each(function(i, elem){
        $(elem).click(function(){
            $("div#"+$(elem).attr("tag")).slideUp(300);
        });
    });
});

或者甚至更短只是将所有这些绑定相同并在单击任何一个时获取属性：

$(function() {
  $(".slider_link").click(function(){
    $("#"+$(this).attr("tag")).slideUp(300);
  });
});

更好的解决方案是使这个更简单，并且在禁用JS的情况下工作，更改你的标记：

 <li><a href="#home" class="slider_link">Home</a></li>
 <li><a href="#calendar" class="slider_link">Calendar</a></li>
 <li><a href="#officers" class="slider_link">Officers</a></li>
 <li><a href="#media" class="slider_link">Media</a></li>

然后你可以像这样绑定你的click处理程序：

$(function() {
  $(".slider_link").click(function(e){
    $(this.hash).slideUp(300);
    e.preventDefault(); //prevent page scroll
  });
});

即使已禁用JS，这也会有效，当您单击相应的链接时，它只会将页面滚动到<div id="home">等。

jQuery：我正在尝试将单击操作绑定到具有相同类的多个元素

1 个答案: