Question

有人可以告诉我如何制作和调用自己的jquery函数吗？（我是一个绝对的前端菜鸟）

以此示例代码： -

      <script>
  $(document).ready(function(){
    $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
            $row = item.title;
            $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });

           $("#refresh").click(function(event){
                alert("yay u clicked refresh!");

    $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
            $row = item.title;
            $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });


            }); 
  });

      </script>

你看到json调用和编辑表的代码被重现2次。我的目的是让json部分在加载页面时运行一次，并且每次用户单击刷新链接时运行。如果我继续使用当前的代码，显然它将成为维护它的主要PITA。

任何线索？

Answer 1

这样做的一种方法是简单地声明自己的函数 - 一个普通的JavaScript函数 - 并将该函数传递给.click()方法并从.ready()调用它：

function requestStories() {
    $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
                $row = item.title;
                $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });
    }); 
}

$(document).ready(function() {
    $("#refresh").click(requestStories);
    requestStories();
});

或者，如果.click()处理程序仅执行JSON请求，则可以在为其提供使其运行的函数后立即调用.click()。例如：

$（document）.ready（function（）{ $（“＃refresh”）。click（function（）{ $ .getJSON（ “http://127.0.0.1:8000/json/storylist/”，功能（数据）{ $ .each（data.stories，function（i，item）{ $ row = item.title; $（'＃storylist tr：last'）。after（“”+ item.id +“”+ item.date +“”+ item.title +“”+ item.priority +“”）; if（i == 3）返回false; }）; }）; }）; 返回false; }）点击（）; }）;

请注意最后额外.click()。这意味着，“现在我已经为您提供了在点击#refresh时运行的功能，但是点击了假装#refresh。请记住，这会运行所有代码点击这样，只有当你打算运行这个函数时才有效。

Answer 2

尝试将JSON函数包装到另一个函数中：

function JSONrequest(){
     $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
                $row = item.title;
                $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });

}

$(document).ready(function(){JSONrequest()});
$("#refresh").click(function(){JSONrequest()});

现在，当您调用JSONrequest函数时，您始终执行相同的代码块

DRI在jquery？ - n00b问题

2 个答案: