Question

当您点击“Obterdirecções”

时，我会在此页http://afonsogomes.com/jbutad2/contactos.php上显示操作的代码。

// 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：我在这里找到的代码可以在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
          });
      }
   });

});

然后首先在html中将地图ID设置为mapa_comdrag。

使用现在的代码，当第二个文档就绪处理程序运行时，没有名为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);

jquery .attr（）不能正常工作

1 个答案: