javascript - 动态 jQuery 方法链

Question

所以，我确信答案很简单，但我正在尝试弄清楚如何将 jQuery 方法链作为参数传递到函数中。这个想法是在 DOM 对象上执行的方法可以是动态的。我正在尝试编写一些 qUnit 测试，其中集中此类功能会很有用。示例:

function changeElement(el, methods){
  $(el).methods;
}

var elMethods1 = $(this).is('visible');
var elMethods2 = $(this).css('background', 'blue').append('appended text');

var el1 = $('.container1');
var el2 = $('.container2');

var result1 = changeElement(el1, elMethods1); // expect to return true/false
console.log(result1);

var result 2 - changeElement(el2, elMethods2); // expect to return DOM object
console.log(result2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='container1'></div>
<div class='container2'></div>

Answer 1

您可以将每个方法字符串编写为一个短函数，如下所示:

var elMethods1 = function(jq) { return jq.is('visible'); }
var elMethods2 = function(jq) { return jq.css('background', 'blue').append('appended text'); }

var el1 = $('.container1');
var el2 = $('.container2');

var result1 = elMethods1(el1); // expect to return true/false
console.log(result1);

var result2 = elMethods2(el2); // expect to return DOM object
console.log(result2);