0

我有一个包含一些内联 javascript 的页面

<script type="text/javascript">
            $('#clipboardContainer').hide();
            $( '#clipboard' ).click(function() {
                $("#clipboardContainer").toggle( "slide", {direction: "up", mode: "hide"}, "slow" );
                $("#reportsContainer").toggle();

                if ($("#clipboard").html() == 'Open Clipboard')
                    $("#clipboard").html('Close Clipboard');
                else
                    $("#clipboard").html("Open Clipboard");
            });
            $('#prev').click(function() {
                $.ajax({
                    type: "GET",
                    url: "/teams/change_date",
                    data: {
                        'id': '<%= @team.id %>',
                        'date': '<%= @date - 1.day %>'
                    }
                });
            });
            $('#next').click(function() {
                $.ajax({
                    type: "GET",
                    url: "/teams/change_date",
                    data: {
                        'id': '<%= @team.id %>',
                        'date': '<%= @date + 1.day %>'
                    }
                });
            });
        </script>

ajax 调用后，我想使用 Jquery 修改“日期”属性。如何使用 DOM 引用 javascript 函数？

4

1 回答 1

2

正如 Esailija 所说，没有办法使用 DOM 函数来操作 javascript 代码，您需要的是实现在成功调用 ajax 后修改的变量：

首先将您的 ajax 数据对象拉出到变量中：

/// pull your ajax data objects out into vars, best not to
/// pollute the global namespace though, as is done here,
/// if you can help it. I've kept things like this for simplicity.
var nextdata = {
  type: "GET",
  url: "/teams/change_date",
  dataType: 'json',
  data: {
    'id': '<%= @team.id %>',
    'date': '<%= @date - 1.day %>'
  }
};

var prevdata = {
  type: "GET",
  url: "/teams/change_date",
  dataType: 'json',
  data: {
    'id': '<%= @team.id %>',
    'date': '<%= @date + 1.day %>'
  }
};

然后创建两个新函数，它们将在您的 ajax 调用成功返回后被调用。

/// these two functions are just examples to illustrate
/// they will alter the ajax data objects when required
/// that is as long as your change_date script returns json
/// containing a 'newdate' property in your expected format.
var nextcallback = function( resp ){
  nextdata.date = resp.newdate;
};

var prevcallback = function( resp ){
  prevdata.date = resp.newdate;
};

然后修改您的原始代码，如下所示：

$('#clipboardContainer').hide();
$( '#clipboard' ).click(function() {
  $("#clipboardContainer").toggle( "slide", 
    {direction: "up", mode: "hide"}, "slow" );
  $("#reportsContainer").toggle();
  if ($("#clipboard").html() == 'Open Clipboard') {
    $("#clipboard").html('Close Clipboard');
  }
  else {
    $("#clipboard").html("Open Clipboard");
  }
});
$('#prev').click(function() {
  $.ajax(prevdata).done(prevcallback);
});
$('#next').click(function() {
  $.ajax(nextdata).done(nextcallback);
});

全局命名空间

关于我关于避免污染全局命名空间的评论，您应该包装您的代码，首先在“无冲突”匿名包装器中，然后在 dom 就绪包装器中 - 如下所示：

;(function($){ /// <-- no conflict wrapper

  /// place your methods here

  $(function(){ /// <-- dom ready wrapper

    /// place your jQuery DOM manipulation here

  });

})(jQuery);

这样你就可以让你的代码与其他任何东西隔离开来，你需要知道你的函数在这些包装函数之外是不可访问的——除非你将它们作为事件侦听器附加或以其他方式在全球范围内公开它们。

或者正如 Ohgodwhy 准确指出的那样，您可以为自己保存一个函数包装器：

jQuery(function($){ /// <-- dom ready + no conflict wrapper
  /// place your functions + jQuery here
});
于 2013-04-14T00:55:30.933 回答