js学习 | jquery click执行自定义函数

最新推荐文章于 2025-07-16 12:36:08 发布

原创最新推荐文章于 2025-07-16 12:36:08 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

js学习专栏收录该内容

18 篇文章

订阅专栏

本文分享了一个关于如何减少JavaScript中重复代码的经验，并详细介绍了使用jQuery优化代码的方法。通过将相似的功能封装到一个函数中并传递参数来实现代码复用，同时解决了事件绑定时函数提前执行的问题。

js小白，第一次写优快云博客，想记录下修改过的bug。

之前做过一个小项目，特别傻的重复的代码，这两天想优化一下。

可以看到都是重复的语句：

 $(function () {
                //按钮单击时执行
                $("#focus_news").click(function(){
                    $.ajax(
                        {
                            type: "GET",
                            url: "/focus_news/",
                            data: {'channelName': '最新','title': ''},
                            datatype: "json",
                            success: function (json) {
                                var s = '';
                                for (var i = 0 ; i < json.length ; i++ ){
                                title_url = json[i]["link"];
                                s += '<div class="news_list" id = "s' + (i+1) + '">' + '<h3>'+ (i+1) + ': ' +
                                    '<a href="' + title_url + '" target="view_window">' + json[i]["title"] +
                                    '</a></h3>'  + '<div class="abstract' + (i+1) + '"><div class="describe">' +
                                    '摘要：'+json[i]["descri"]+'(点击标题查看更多...)</div><div class="img_box" id="img' + i + '">' +
                                     + '>' + '</div></div>' + '<div class="source">' + json[i].channelName + '\t|\t' + json[i]["source"] + '\t|\t发布时间：' + json[i]["pubDate"] +'</div></div>';
                                }
                                if ( json.length === 10) {
                                    title_name = json[9]["title"];
                                    channel_name = '最新';
                                }
                                else{
                                    s += '没有更多信息了。'
                                }
                                $("#news_show").html(s);
                                $("#wordcloud").html( '<img src="{% static 'wordcloud/focus_news.png' %}" />');
                                $('#img0').html(ReferrerKiller.imageHtml(json[0].imageurls));
                                $('#img1').html(ReferrerKiller.imageHtml(json[1].imageurls));
                                $('#img2').html(ReferrerKiller.imageHtml(json[2].imageurls));
                                $('#img3').html(ReferrerKiller.imageHtml(json[3].imageurls));
                                $('#img4').html(ReferrerKiller.imageHtml(json[4].imageurls));
                                $('#img5').html(ReferrerKiller.imageHtml(json[5].imageurls));
                                $('#img6').html(ReferrerKiller.imageHtml(json[6].imageurls));
                                $('#img7').html(ReferrerKiller.imageHtml(json[7].imageurls));
                                $('#img8').html(ReferrerKiller.imageHtml(json[8].imageurls));
                                $('#img9').html(ReferrerKiller.imageHtml(json[9].imageurls));
                                mouse_over();
                            }
                        }
                    );
                });
                $("#inner_news").click(function(){
                    $.ajax(
                        {
                            type: "GET",
                            url: "/focus_news/",
                            data: {'channelName': '国内','title': ''},
                            datatype: "json",
                            success: function (json) {
                                var s = '';
                                for (var i = 0 ; i < json.length ; i++ ){
                                title_url = json[i]["link"];
                                s += '<div class="news_list" id = "s' + (i+1) + '">' + '<h3>'+ (i+1) + ': ' +
                                    '<a href="' + title_url + '" target="view_window">' + json[i]["title"] +
                                    '</a></h3>'  + '<div class="abstract' + (i+1) + '"><div class="describe">' +
                                    '摘要：'+json[i]["descri"]+'(点击标题查看更多...)</div><div class="img_box" id="img' + i + '">' +
                                     + '>' + '</div></div>' + '<div class="source">' + json[i].channelName + '\t|\t' + json[i]["source"] + '\t|\t发布时间：' + json[i]["pubDate"] +'</div></div>';
                                }
                                if ( json.length === 10) {
                                    title_name = json[9]["title"];
                                    channel_name = '国内';
                                }
                                else{
                                    s += '没有更多信息了。'
                                }
                                $("#news_show").html(s);
                                $("#wordcloud").html( '<img src="{% static 'wordcloud/inner_news.png' %}" />');
                                $('#img0').html(ReferrerKiller.imageHtml(json[0].imageurls));
                                $('#img1').html(ReferrerKiller.imageHtml(json[1].imageurls));
                                $('#img2').html(ReferrerKiller.imageHtml(json[2].imageurls));
                                $('#img3').html(ReferrerKiller.imageHtml(json[3].imageurls));
                                $('#img4').html(ReferrerKiller.imageHtml(json[4].imageurls));
                                $('#img5').html(ReferrerKiller.imageHtml(json[5].imageurls));
                                $('#img6').html(ReferrerKiller.imageHtml(json[6].imageurls));
                                $('#img7').html(ReferrerKiller.imageHtml(json[7].imageurls));
                                $('#img8').html(ReferrerKiller.imageHtml(json[8].imageurls));
                                $('#img9').html(ReferrerKiller.imageHtml(json[9].imageurls));
                                mouse_over();
                            }
                        }
                    );

把重复的地方都封装成一个函数：

function channel_abstr(channelurl,name){
                $.ajax({
                    type: "GET",
                    url: "/focus_news/",
                    data: {'channelName': name,'title': ''},
                    datatype: "json",
                    success: function (json) {
                        var s = '';
                        for (var i = 0 ; i < json.length ; i++ ){
                            title_url = json[i]["link"];
                            s += '<div class="news_list" id = "s' + (i+1) + '">' + '<h3>'+ (i+1) + ': ' +
                                '<a href="' + title_url + '" target="view_window">' + json[i]["title"] +
                                '</a></h3>'  + '<div class="abstract' + (i+1) + '"><div class="describe">' +
                                '摘要：'+json[i]["descri"]+'(点击标题查看更多...)</div><div class="img_box" id="img' + i + '">' +
                                + '>' + '</div></div>' + '<div class="source">' + json[i].channelName + '\t|\t' + json[i]["source"] + '\t|\t发布时间：' + json[i]["pubDate"] +'</div></div>';
                                }
                        if ( json.length === 10) {
                            title_name = json[9]["title"];
                            channel_name = name;
                        }
                        else{
                            s += '没有更多信息了。'
                        }
                        $("#news_show").html(s);
                        $("#wordcloud").html( '<img src="{% static 'wordcloud/' + channelurl + '.png' %}" />');

                        for(let i = 0 ; i < 9 ; i++) {
                            $('#img' + i).html(ReferrerKiller.imageHtml(json[i].imageurls));
                        }
                        mouse_over();
                }
            })
            }

然后前面调用：

$(function () {
                $('#inner_news').click(channel_abstr('inner_news','国内'));
                $('#outer_news').click(channel_abstr('outer_news','国际'));
                $('#society_news').click(channel_abstr('society_news','社会'));
                $('#finance_news').click(channel_abstr('finance_news','财经'));
                $('#army_news').click(channel_abstr('army_news','军事'));
            });

这时候问题来了，channel_abstr在click之前就发生了。

百度之后，发现jquery click事件执行自定义函数要这样写：

$(function () {
                $('#inner_news').click(function(){
                    channel_abstr('inner_news','国内');
                });
                $('#outer_news').click(function(){
                    channel_abstr('outer_news','国际')
                });
                $('#society_news').click(function () {
                    channel_abstr('society_news','社会')
                });
                $('#finance_news').click(function () {
                   channel_abstr('finance_news','财经')
                });
                $('#army_news').click(function () {
                    channel_abstr('army_news','军事')
                });
            });

这样就可以了。