jQuery的.attr（）不工作，因为它应该

Question

我有http://afonsogomes.com/jbutad2/contactos.php此页面上的操作代码波纹管，当你点击“Obterdirecções”

// GOOGLE MAPS PAGINA CONTACTOS 
$(document).ready(function() { 
$('#direccoes').hide(); 
$('.button2').click(function() { 
    $('#direccoes').delay(2000).slideToggle(600); 
    $('#morada').delay(3000).fadeOut(1000); 
    $('#visite').delay(4200).fadeOut(1000); 
    $("#map_canvas").delay(5400).animate({'height': '450px'}); 
    $("div#mapa_semdrag").attr('id','mapa_comdrag'); 
    setDirections(this.from.value, this.to.value, this.locale.value); 
    return false; 
}); 
}); 

$(function() { 

var $sidebar = $("#mapa_comdrag"), 
    $window = $(window), 
    offset  = $sidebar.offset(), 
    topPadding = 20; 

$window.scroll(function() { 
    if ($window.scrollTop() > offset.top) { 
     $sidebar.stop().animate({ 
      marginTop: $window.scrollTop() - offset.top + topPadding 
     }); 
    } else { 
     $sidebar.stop().animate({ 
      marginTop: 0 
     }); 
    } 
    }); 

}); 

的想法是地图跟着你，当你双击自动滚屏下来阅读方向......这样做的功能正常......但问题是：如果你不点击“ObterDirecções”，我希望地图保持静止。我使用.attr（）更改div的id，但这可能不是解决方案，因为它不起作用。

任何帮助将不胜感激如何解决这个问题。

PS：我在这里pased的代码可以在的script.js找到

Answer 1

我不知道下面将足以得到它的工作，但尝试你的两个文件准备好处理程序合并到同一功能也进行以下修改：

$(document).ready(function() { 
    // new flag: 
    var scrollMap = false; 

    $('#direccoes').hide(); 
    $('.button2').click(function() { 
     $('#direccoes').delay(2000).slideToggle(600); 
     $('#morada').delay(3000).fadeOut(1000); 
     $('#visite').delay(4200).fadeOut(1000); 
     $("#map_canvas").delay(5400).animate({'height': '450px'}); 
     // don't change the id - set it to mapa_comdrag in your html 
     // $("div#mapa_semdrag").attr('id','mapa_comdrag'); 
     // set flag to true: 
     scrollMap = true; 
     // change following: 
     // setDirections(this.from.value, this.to.value, this.locale.value); 
     // to be: 
     setDirections(this.form.from.value, this.form.to.value, this.form.locale.value); 
     return false; 
    }); 

    var $sidebar = $("#mapa_comdrag"), 
     $window = $(window), 
     offset  = $sidebar.offset(), 
     topPadding = 20; 

    $window.scroll(function() { 
     // don't do anything if flag not set: 
     if (!scrollMap) return; 
     if ($window.scrollTop() > offset.top) { 
      $sidebar.stop().animate({ 
      marginTop: $window.scrollTop() - offset.top + topPadding 
      }); 
     } else { 
      $sidebar.stop().animate({ 
      marginTop: 0 
      }); 
     } 
    }); 

}); 

，然后设置地图ID来mapa_comdrag在HTML摆在首位。

与您的代码，因为它是现在，当你的第二个文档准备好处理程序运行有id为mapa_comdrag没有元素，这意味着这个变量：

$sidebar = $("#mapa_comdrag") 

将是一个空的jQuery对象，这反过来又也就是说下面不工作：

offset = $sidebar.offset() // offset doesn't make sense when `$sidebar` is empty 

...所以内滚动处理offset和$sidebar不起作用。

另外，与您无关，在您当前的按钮点击处理程序中，this的值将是被点击的按钮，但您似乎将其视为该按钮属于的窗体。因此，在以下行上：

setDirections(this.from.value, this.to.value, this.locale.value); 

...所有三个参数都是未定义的。你可以解决这个问题如下：

setDirections(document.getElementById("from").value, 
       document.getElementById("to").value, 
       document.getElementById("locale").value); 
// OR 
setDirections(this.form.from.value, this.form.to.value, this.form.locale.value); 
// OR 
var parentForm = this.form; 
setDirections(parentForm.from.value, parentForm.to.value, parentForm.locale.value);