Question

我是一个jQuery新手，我用它创建了我的第一个功能程序。它包含图像上的一系列超链接，当您单击一个单词（超链接）时，它会调用一些更改页面外观的jQuery，并调用执行搜索并显示其结果的Ajax例程。

我的问题是我有许多不同的超链接，所有这些超链接基本上都是一样的，只有一个简单的字符串在处理它的jQuery中是不同的。

我确信有一种很好的方法可以创建一段代码，一旦可以执行将字符串作为参数传递，但我还不知道如何做到这一点。有人可以建议最干净的方法吗？

我的一些代码如下，但请忽略## NOTATION，因为这是在ColdFusion中，它会在它到达浏览器之前将其转换为单个＃。

$( "##Shoulders" ).click(function() {
    $("##div1").animate({ height:0 }, 500).css('overflow', 'visible').empty();
    $("##div2").animate({ height:0 }, 500).css('overflow', 'visible').empty(); 
    $('##div3spacer').ScrollTo();
    $("##div3").load("ThreeSearchExercise.cfm?A=Shoulders", function () {
        $('.js-lazyYT').lazyYT(); 
        });
    }); 

$( "##Arms" ).click(function() {
    $("##div1").animate({ height:0 }, 500).css('overflow', 'visible').empty();
    $("##div2").animate({ height:0 }, 500).css('overflow', 'visible').empty(); 
    $('##div3spacer').ScrollTo();
    $("##div3").load("ThreeSearchExercise.cfm?A=Arms", function () {
        $('.js-lazyYT').lazyYT(); 
        });
    });

Answer 1

唯一改变的是A参数。所以你可以这样做

function clickHandler() {
    $("##div1,##div2").animate({ height: 0 }, 500).css('overflow','visible').empty();
    $('##div3spacer').ScrollTo();
    $("##div3").load("ThreeSearchExercise.cfm?A=" + this.id, function() {
       $('.js-lazyYT').lazyYT();
    });
}

并像这样绑定

$('##Shoulders, #Arms').click(clickHandler);

Answer 2

您正在每次click（）调用中定义匿名函数。改为使用单个命名函数。

function handleClick() {
    function() {
        $("##div1").animate({ height:0 }, 500).css('overflow', 'visible').empty();
        $("##div2").animate({ height:0 }, 500).css('overflow', 'visible').empty(); 
        $('##div3spacer').ScrollTo();
        $("##div3").load("ThreeSearchExercise.cfm?A=Arms", function () {
            $('.js-lazyYT').lazyYT(); 
        });
    }
}

$( "##Shoulders" ).click(handleClick); 
$( "##Arms" ).click(handleClick);

如何将重复的jQuery代码放入子例程或函数中？

2 个答案: