Question

我正在创建一个包含两个部分的页面，我可以通过点击标题将内容.load()加载到#container。

<div id=dogs>[dogs]</div> 
<div id=cats>[cats]</div>
<div id=#container></div>
<div class=button_dogs></div>

我的问题

我有一个右下角的固定按钮，我只希望它显示在#dogs部分（不在cat部分）中，并且页面默认使用#dog部分进行初始化，所以我的代码是那样的

$("#container").load("content.php?s=dogs"); //initial

$("#cats").click(){function(){
      $("#container").load("content.php?s=cats"); //after click
      $(".button_dogs").hide();
      $(window).unbind(".button");
}}

$("#dogs").click(){function(){
      $("#container").load("content.php?s=dogs"); //after click
      $(".button_dogs").show(); 
      $(window).bind("scroll.button");

}}

这是绑定到window

的固定按钮

$(".button_dogs").hide();
$(window).bind("scroll.button", function(){
      if($(this).scrollTop()>50) {
          $(".button_dogs").show()
      } else {
          $(".button_dogs").fadeOut()
      }
});

我不知道我做错了什么，当点击#dogs它再次绑定固定按钮功能，但它不能用于之前的效果。这是我怀疑的线关于（来自#dogs点击事件）

$(".button_dogs").show();   
$(window).bind("scroll.button");

Answer 1

首先，您需要使用引号包装元素ID和类。有些浏览器并不关心，但其他浏此外，除非您使用选择器来查找它，否则不要在容器ID前面添加哈希值...

<div id="dogs">[dogs]</div> 
<div id="cats">[cats]</div>
<div id="container"></div>
<div class="button_dogs"></div>

您可以在不删除和重新添加事件处理函数的情况下执行您要执行的操作。此方法将使用内容div上的数据属性来指定内容类型，因此如果不是狗内容，滚动处理程序可以简单地退出...

// keep a reference to the content div, rather than keep looking it up...
var $container = $("#container");

$("#cats").click(function() {
    $container
        .load("content.php?s=cats")
        .data("content", "cats");       // add a data attribute that has the value "cats"
});

$("#dogs").click(function() {
    $container
        .load("content.php?s=dogs")
        .data("content", "dogs");       // add a data attribute that has the value "dogs"
});

$(".button_dogs").hide();

$(window).bind("scroll.button", function() {
    // if the content is not dogs then exit this function...
    if ($container.data("content") != "dogs") return;

    if ($(this).scrollTop() > 50) {
        $(".button_dogs").show();
    }
    else {
        $(".button_dogs").fadeOut();
    }
});

$("#dogs").trigger("click");  // click the dogs button to initialize the page

我还添加了变量$content，它是对#content元素的引用，因此每次引用它时都不需要继续查找它。使用ID重复查找并不昂贵，但这是一个很好的习惯。

最后，我添加了代码以在页面加载时单击dog按钮，而不必复制发生这种情况时执行的代码。

unbind窗口后绑定Jquery

1 个答案: