Question

我的页面中包含一些内联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修改'date'属性。如何使用DOM引用javascript函数？

Answer 1

如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 ready包装器中包装 - 如下所示：

;(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
});

如何使用更多的javascript修改页面中的javascript？

1 个答案:

全局命名空间